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