Vue部署Nginx后访问/web/service路径静态资源404如何配置？

问题根因 #

1. Vue打包默认publicPath为/，生成的index.html内静态资源引用均为根绝对路径/static/xxx，访问/web/service路径下的页面时，浏览器会直接请求域名根路径下的静态资源
2. 原Nginx配置存在两处问题：一是add_header "GET, POST, HEAD" always;语法错误，可能导致配置段不生效；二是/static路径的alias配置存在映射兼容问题，导致根路径的静态资源请求404

解决方案 #

方案一：仅修改Nginx配置（无需调整前端代码） #

替换原有Nginx配置为以下内容，修正语法错误和路径映射规则：

server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    root /var/www/vue/dist;

    add_header X-Content-Type-Options "nosniff";
    add_header X-XSS-Protection "1; mode=block";
    # 原配置的add_header语法错误，若需要跨域方法配置可取消下面一行的注释
    # add_header Access-Control-Allow-Methods "GET, POST, HEAD" always;

    # 修正静态资源路径映射
    location /static {
        root /var/www/vue/dist;
    }

    location /web/service {
        if ($request_method = OPTIONS ) {
              return 405;
        }
        rewrite ^/web/service/(.*)$  /$1  break;
        try_files $uri $uri/   /index.html;
        autoindex off;
        index   index.html;
    }
}

修改完成后执行nginx -s reload重载配置即可生效。

方案二：修改Vue打包配置（更适合多环境部署场景） #

在Vue项目根目录的vue.config.js（无该文件则新建）中添加publicPath配置：

module.exports = {
  publicPath: '/web/service/'
}

重新打包部署后，所有静态资源引用路径会自动生成/web/service/static/xxx格式，和你直接访问可正常加载的路径完全匹配，无需修改Nginx配置即可正常运行。

内容的提问来源于stack exchange，提问作者rlawlgus322