Nuxt.js生产构建后proxy代理pathRewrite路径重写规则失效问题

根本原因 #

@nuxtjs/proxy 模块默认仅在开发环境生效，生产环境构建后不会加载对应的代理和路径重写逻辑，这是生产环境请求前缀保留的核心原因。另外你的现有配置存在语法错误，需要先修正。

第一步：修正配置错误 #

你当前配置中 process.env.BASE_URL 被包裹在引号内，会被识别为固定字符串而非环境变量，先修改为如下格式：

axios: {
  proxy: true,
  baseURL: process.env.NODE_ENV === "production"
    ? process.env.BASE_URL
    : "http://192.168.13.5:5000",
  proxyHeaders: true,
  credentials: true
},
proxy: {
  '/test1/': {
    target: process.env.NODE_ENV !== "production"
      ? "http://192.168.1.2:5000"
      : process.env.BASE_URL, 
    pathRewrite: {'^/test1/': ''}
  },
  '/test2/': {
    target: process.env.NODE_ENV !== "production"
      ? "http://192.168.1.3:5000"
      : process.env.BASE_URL, 
    pathRewrite: {'^/test2/': ''}
  },
},

第二步：根据部署场景选择解决方案 #

场景1：生产环境使用Nuxt SSR模式（Node服务运行）

如果你的项目是SSR模式部署，可手动开启生产环境代理支持，在nuxt.config.js中新增配置：

server: {
  proxy: true // 开启生产环境代理，默认仅开发环境为true
}

注意：Nuxt内置代理性能远低于专业Web服务器，高并发业务场景不推荐使用该方案。

场景2：生产环境部署在Nginx/Caddy等Web服务器下（SSR/SSG均适用）

直接在Web服务器配置代理及路径重写规则即可，以Nginx为例，配置示例如下：

location ^~ /test1/ {
    proxy_pass http://你的生产环境test1接口地址/; # 末尾的斜杠会自动去掉/test1/前缀
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}
location ^~ /test2/ {
    proxy_pass http://你的生产环境test2接口地址/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

如果生产环境两个接口域名相同，直接把proxy_pass的值换成统一的生产域名即可。

场景3：无需修改服务端配置的兼容方案

可通过axios请求拦截器在生产环境自动移除前缀，在你的axios插件配置中添加如下逻辑：

export default function ({ $axios }) {
  $axios.onRequest(config => {
    if (process.env.NODE_ENV === 'production') {
      // 匹配并移除路径前缀
      config.url = config.url.replace(/^\/test1\//, '/').replace(/^\/test2\//, '/')
    }
    return config
  })
}

该方案仅适用于生产环境两个前缀对应的接口域名和baseURL一致的场景。

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