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,由前端路由接管。