如何在同一域名部署Vue3与Vue2应用？解决chunk 404问题

一、解决/admin路径chunk 404问题 #

出现404的核心原因是Vue2后台应用构建时，资源路径默认以根目录（/）为基准，导致访问/admin时，浏览器会从根目录请求chunk文件，而这些文件实际存放在/admin目录下。按以下步骤修复：

1. 修改Vue2项目的publicPath配置
   在vue.config.js中设置生产环境的publicPath为'/admin/'（绝对路径，确保资源指向正确目录）：

   module.exports = {
     publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/'
   }
   

2. 配置Vue2路由的base路径
   在Vue2路由配置文件中，指定路由基准路径为'/admin/'：

   import VueRouter from 'vue-router'
   import routes from './routes'
   
   const router = new VueRouter({
     mode: 'history',
     base: '/admin/',
     routes
   })
   

3. 服务器部署配置（以Nginx为例）
   配置location规则，将不同路径的请求指向对应应用的构建目录：

   server {
     listen 443 ssl;
     server_name host.com;
   
     # 商城应用：根路径指向商城dist目录
     location / {
       root /path/to/mall/dist;
       try_files $uri $uri/ /index.html;
     }
   
     # 后台应用：/admin路径指向后台dist目录
     location /admin {
       root /path/to/admin/dist;
       try_files $uri $uri/ /admin/index.html;
     }
   }
   

   部署时将商城dist文件放在服务器对应根目录位置，后台dist文件放在服务器的admin目录下即可。

二、单个index.html同时运行Vue3和Vue2应用 #

可以实现，但需处理全局变量冲突、样式隔离和路由切换问题，步骤如下：

1. 调整构建配置

   • Vue2项目：将应用封装为独立模块，避免污染全局变量，在vue.config.js中添加：

     module.exports = {
       configureWebpack: {
         output: {
           library: 'Vue2Admin',
           libraryTarget: 'umd'
         }
       }
     }
     

   • Vue3项目：同样通过构建配置封装为独立模块，或直接使用createApp进行局部挂载。

2. 单HTML文件结构与逻辑
   在index.html中引入两个应用的打包JS，根据当前路径判断挂载哪个应用，并监听路由变化切换显示：

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <title>双应用入口</title>
     <style>
       #mall-app, #admin-app { display: none; }
     </style>
   </head>
   <body>
     <div id="mall-app"></div>
     <div id="admin-app"></div>
   
     <script src="./admin-app.js"></script>
     <script src="./mall-app.js"></script>
   
     <script>
       function switchApp() {
         const path = window.location.pathname
         const mallEl = document.getElementById('mall-app')
         const adminEl = document.getElementById('admin-app')
   
         if (path.startsWith('/admin')) {
           mallEl.style.display = 'none'
           adminEl.style.display = 'block'
           Vue2Admin.mount('#admin-app')
         } else {
           adminEl.style.display = 'none'
           mallEl.style.display = 'block'
           createMallApp.mount('#mall-app')
         }
       }
   
       // 初始加载切换应用
       switchApp()
       // 监听浏览器前进后退切换应用
       window.addEventListener('popstate', switchApp)
     </script>
   </body>
   </html>
   

3. 路由与样式隔离

   • 路由：Vue3商城路由设置base: '/'，Vue2后台路由设置base: '/admin/'，确保路由规则不冲突。
   • 样式：两个应用的组件均使用scoped样式，或给根节点添加唯一类名（如.mall-root、.admin-root），所有样式嵌套在类名之下，避免样式污染。

注意：这种单HTML方案维护成本较高，除非有特殊需求，更推荐采用分开部署的方案（即第一部分的方法），稳定性和可维护性更强。

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