Vite代理/admin至Vue管理应用异常：返回正确HTML却渲染用户应用

核心原因拆解 #

1. Vite开发服务器的客户端脚本注入：Vite在开发模式下会自动向返回的HTML注入热重载客户端脚本。当代理/admin路径到管理应用时，Vite会把用户应用的热更新脚本注入到管理应用的HTML中，这个脚本会优先启动并接管页面渲染，覆盖管理应用的逻辑——这就是明明返回了管理应用HTML，却显示用户应用的核心原因。
2. 哈希路由的路径适配问题：两个应用都使用createWebHashHistory()，但用户应用的跳转路径是/admin（非hash路径）。管理应用加载后，其路由系统会基于URL的hash部分解析路径，当前URL的hash为空，可能导致管理应用无法匹配到正确路由；同时，若管理应用的静态资源路径基于自身根路径（/），浏览器会以/admin为前缀请求资源（比如/admin/assets/main.js），未被代理的话会返回用户应用资源，导致管理应用加载失败。

具体解决步骤 #

1. 禁用Vite对代理路径的脚本注入 #

在用户应用的Vite配置中，针对/admin代理路径添加拦截，禁止Vite注入客户端脚本：

// 用户应用 vite.config.js
export default {
  server: {
    proxy: {
      '/admin': {
        target: 'http://127.0.0.1:3001',
        changeOrigin: true,
        pathRewrite: { '^/admin': '' },
        // 跳过Vite的HTML脚本注入
        configure: (proxy) => {
          proxy.on('proxyRes', (proxyRes) => {
            // 移除Vite注入脚本的相关响应头
            delete proxyRes.headers['content-security-policy'];
          });
        }
      }
    }
  }
}

2. 统一路由路径前缀 #

给管理应用配置专属路径前缀，避免资源请求冲突：

• 在管理应用的Vite配置中设置base: '/admin'
• 管理应用的路由改为createWebHashHistory('/admin')

这样管理应用的所有静态资源路径都会自动带上/admin前缀，只需通过用户应用的/admin代理即可正确匹配所有资源。

3. 验证代理后的HTML内容 #

用curl http://127.0.0.1:3000/admin查看返回的HTML，确认：

• 没有包含用户应用的Vite热更新脚本（比如<script type="module" src="/@vite/client"></script>）
• 管理应用的JS/CSS路径正确（比如/admin/assets/main.js）

4. 临时关闭热重载验证 #

若不确定是否是热重载脚本干扰，可临时关闭用户应用的热重载测试：

// 用户应用 vite.config.js
export default {
  server: {
    hot: false
  }
}

若关闭后管理应用正常渲染，即可确认是热重载脚本的问题，再针对性处理。

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