Nginx 部署前端项目配置
打包好的前端项目可以用 Nginx 直接托管。如果是 Vue Router 的 history 模式,刷新页面会出现 404,需要配合 try_files 把请求回退到 index.html:
1server {
2 listen XXXX; # 端口号
3 server_name XXX.XXX.XXX.XXX; # 本机 IP 地址
4
5 location / {
6 root E:/website/dist/; # 打包后的项目路径
7 index index.html index.htm; # 默认访问的页面
8 try_files $uri $uri/ /index.html; # 解决 history 路由刷新 404
9 }
10}
其中 try_files $uri $uri/ /index.html 表示:先按原路径找文件,找不到再按目录找,都找不到就返回 index.html,由前端路由接管。
