Vue项目部署，NGINX配置

2022-07-10 23:34:13 阅读：253 来源： 互联网

标签：opt Vue dist 部署 NGINX html proxy 打包 location

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. 访问网站，大功告成！

标签：opt,Vue,dist,部署,NGINX,html,proxy,打包,location
来源： https://www.cnblogs.com/xianqingsong/p/16464230.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue项目部署，NGINX配置