nginx前端部署配置

Nginx部署项目
1、yarn build打包Vue项目
2、打开nginx.conf文件,配置对应的信息

nginx.conf

location / {root  C:\Users\17542\Desktop\rrpject-v2\dist;root  index.html index.htm;try_files $uri $uri/ @router;    //解决页面刷新404问题
}
location @router {rewrite ^.*$ /index.html last; // Vue项目路由不是真实存在的
}

3、检查配置文件是否配置成功

cmd
nginx -t -c D:nginx-1.16.1\conf\nginx.conf

如图：

分解：
1）.配置端口及路径

2）、检查nginx的配置是否成功
nginx -t -c nginx文件目录
最后提示success

3）、启动 start nginx

4）处理相关报错

try_files $uri $uri/ @router;     //找指定路径下的文件，如果不存在，则转给哪个文件执行try_files $uri $uri/ /index.html; // 这一行是为了SPA应用能正确处理路由location @router{rewrite ^.*$ /index.html last;    //处理500
}

5）重启命令：

nginx -s reload