Vue3 Router外部化后无路由出口、内容不渲染问题求助

根因分析 #

• 核心矛盾是Vue与Vue Router的实例不共享：当通过CDN引入这两个库时，若构建配置存在疏漏，会导致项目中出现多个Vue实例——Vue Router绑定到了CDN提供的全局Vue实例，而业务组件却依赖了构建产物中残留的局部Vue实例，两者无法互通，最终路由组件无法被正确初始化，表现为setup不执行、router-view仅渲染空注释。
• 这类问题本质和官方提到的多实例冲突案例一致：Vue的单例特性要求所有插件、组件都基于同一个实例工作，版本不匹配或实例分离都会导致此类隐性失效。

排查思路 #

• 严格对齐版本：确保CDN引入的vue@3.4.29、vue-router@4.3.3与package.json中的依赖版本完全一致，小版本差异也可能引发实例不兼容。
• 校验Rollup externals配置：确保vue、vue-router及其所有子路径都被正确标记为外部资源，避免构建时将局部实例打包进产物。
• 修正Vite dedupe配置：必须同时将vue和vue-router加入resolve.dedupe数组，强制所有引用指向CDN全局实例，示例配置：

  export default defineConfig({
    resolve: {
      dedupe: ['vue', 'vue-router']
    }
  })
  

• 配置全局变量映射：在Vite的define选项中，将模块名映射为CDN暴露的全局变量，确保构建时正确替换模块引用：

  export default defineConfig({
    define: {
      'vue': 'Vue',
      'vue-router': 'VueRouter'
    }
  })
  

• 排查第三方依赖：检查项目中UI库、工具类依赖是否内置了Vue或Vue Router，若存在需将这些依赖也配置为external，避免引入额外的局部实例。
• 生产环境临时调试：
  • 在控制台打印Vue.version和VueRouter.version，确认版本匹配。
  • 打印app._instance和router.app，验证是否指向同一个Vue实例，若不一致则说明实例分离。

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