vue项目打包通过nginx访问

1. 修改前端vue项目文件.env.production中的后台api地址为自己线上的访问地址，即修改

   VUE_APP_BASE_API参数的值；

2. 在终端中输入命令进行打包：

   # 打包正式环境
   npm run build:prod

 打包完成后在项目根目录下会生成一个dist文件夹，将dist上传到服务器nginx的html文件夹中，

3.修改nginx配置文件nginx.conf,http模块如果没有server节点，先添加server节点，并在里边进行配置vue项目地址和后台接口地址：

 server {listen       80;server_name  172.135.236.28;charset utf-8;location / {root  /usr/share/nginx/html/dist;#try_files $uri $uri/ /index.html;index  index.html index.htm;}location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://172.135.236.28:8088/;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

主要修改的地方：

(1)server_name，配置后台地址或域名，

(2)location root配置上传到服务器的路径，由于我的nginx使用docker安装，docker nginx中的html在/usr/share/nginx/html下，所以root的是配置的是/usr/share/nginx/html/dist，这里要根据自己的实际情况来配置，否则会提示404，

(3)prod-api中的proxy_pass配置后台地址。

经过以上三步，重新加载下nginx就可以访问前端项目了。

这里有一处地方需要注意try_files $uri $uri/ /index.html;这一行代码会导致nginx启动报错：rewrite or internal redirection cycle while internally redirecting to "/index