Nginx反向代理Nuxt.js应用静态资源加载异常问题求助

问题根源 #

Nuxt.js默认认为自己运行在域名根路径下，生成的静态资源、路由链接都是根路径（如/_nuxt/xxx）。当通过反向代理子目录/web访问时，浏览器会从主站ServerA的根路径加载这些资源，而非走代理到ServerB。需要同时调整Nuxt配置和Nginx反向代理规则。

步骤1：修改Nuxt.js配置文件（nuxt.config.js） #

在Nuxt项目的nuxt.config.js中添加以下配置，指定应用的基础路径：

export default {
  // 静态资源的基础URL前缀
  publicPath: '/web/',
  // 路由的基础路径
  router: {
    base: '/web/'
  }
}

配置完成后，重新构建并重启Nuxt服务：

npm run build
npm run start

步骤2：修改ServerA的Nginx配置 #

替换原有配置为以下内容，确保正确处理example.com/web的请求转发：

server {
  listen 80;
  server_name example.com;

  # 保留主站CMS的原有配置，处理根路径请求
  location / {
    # 此处填写你原有的CMS服务配置，比如：
    # root /var/www/cms;
    # index index.html;
    # 或 proxy_pass http://localhost:8080;
  }

  # 处理/web路径的请求，转发到ServerB的Nuxt应用
  location /web/ {
    # 注意proxy_pass结尾的斜杠，会将/web/后的路径转发到ServerB的根路径
    proxy_pass http://ServerB_ip_address:3000/;
    
    # 设置代理头，让Nuxt识别真实请求信息
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    proxy_redirect off;
  }
}

注意：如果你的Nuxt应用运行在非3000端口，请修改proxy_pass中的端口号。

配置完成后，重新加载Nginx使配置生效：

sudo nginx -s reload

验证效果 #

访问example.com/web，查看页面静态资源的请求路径，应该显示为example.com/web/_nuxt/assets/cute-dog.jpg这类带/web/前缀的路径，说明资源已正确从ServerB加载。

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