单Vue应用多租户路径适配的Nginx与VUE_APP_PUBLIC_PATH配置问题

问题根因 #

VUE_APP_PUBLIC_PATH是Vue构建阶段的环境变量，仅在打包时生效，无法适配运行时不同租户的动态路径前缀需求，同时你当前的Nginx配置存在路径匹配不全、未传递租户ID到请求头的问题。

第一步：Vue侧配置调整 #

1. 配置相对路径publicPath #

修改项目根目录下的vue.config.js，将publicPath设为相对路径，让静态资源自动跟随当前页面路径加载：

module.exports = {
  publicPath: './', // 核心配置，所有静态资源使用相对路径引用
  // 其余原有配置保持不变
}

2. 动态配置路由base（如果使用history模式路由） #

路由的base路径需要和租户路径前缀对齐，修改路由初始化逻辑：

// 路由配置文件内逻辑
const getDynamicBase = () => {
  const pathArr = window.location.pathname.split('/')
  if (pathArr.length >= 3 && pathArr[1] === 'shop') {
    return `/shop/${pathArr[2]}`
  }
  return '/'
}

// Vue3路由示例
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(getDynamicBase()),
  routes: [/* 原有路由配置 */]
})

3. 可选：运行时强制指定publicPath #

如果相对路径配置仍有问题，可以在main.js最顶部添加webpack运行时公共路径配置，优先级高于构建时配置：

// main.js 首行添加
const pathArr = window.location.pathname.split('/')
if (pathArr.length >= 3 && pathArr[1] === 'shop') {
  __webpack_public_path__ = `/shop/${pathArr[2]}/`
}

第二步：Nginx配置调整 #

1. 修正8121端口的无效配置 #

你当前配置里8121 server块下的To是无效配置，直接删除即可。

2. 调整80端口的/shop location配置 #

补全路径匹配规则，同时将租户ID写入请求头：

server {
    server_name my.com;
    listen 80;

    location /shop {
        # 提取租户ID存入变量
        set $tenant_id "";
        if ($request_uri ~* "^/shop/([^/]+)") {
            set $tenant_id $1;
        }
        # 写入自定义请求头，后端/前端都可以直接读取该头获取租户ID
        proxy_set_header X-Tenant-Id $tenant_id;

        # 适配所有租户前缀的路径重写，包括直接访问租户根路径场景
        rewrite "^/shop/[^/]+(/.*)?$" $1 break;

        proxy_pass http://localhost:8121/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

验证步骤 #

1. 重新打包Vue应用，检查dist目录下index.html内的js/css引用均为./js/xxx.js格式的相对路径
2. 执行nginx -s reload重载Nginx配置
3. 分别访问三个租户地址，检查静态资源加载状态，查看请求头中是否携带X-Tenant-Id字段

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