Vue项目部署，NGINX配置

本文主要是介绍Vue项目部署，NGINX配置，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.  vue项目打包

1.1 在终端输入打包命令，进行打包　　

npm run build

打包后会生成文件夹dist

1.2 把打包好的文件移动到/opt/下面

sudo mv  dist/ /opt/

2. 开始配置NGINX

2.1 进入到配置目录下 

cd /etc/nginx//sites-enabled/

2.2 使用vim打开default文件进行配置

sudo vim default

2.3 在default文件中添加如下内容

erver {
        listen 7777;
#       listen [::]:80;
#
        server_name localhost;
        root /opt/dist;
        index index.html;
        location / {
                try_files $uri $uri/ =404;
        }

        # 配置跨域代理
        location /api {
                rewrite ^/api/(.*)$ /$1 break;
                proxy_pass http://127.0.0.1:8000;
                proxy_redirect off;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                # proxy_read_timeout 300;
                # proxy_send_timeout 300;
        }

        error_page 500 502 503  504 /50x.html;
        location = /50x.html {
                root html;
        }
}

2.4 重启NGINX

systemctl restart nginx

如果没有问题提示说明成功了， 你可以在终端输入systemctl status nginx 查看运行状态

3. 访问网站，大功告成！

这篇关于Vue项目部署，NGINX配置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！