Vue兼容模式下根组件未渲染问题排查：Vue2渐进式迁移至Vue3遇阻

根据你的描述，虽然在Webpack配置中设置了vue指向@vue/compat的别名，但实际导入的大概率还是原始Vue2包，导致inline模板无法被正确编译（Vue2的runtime-only版本不支持编译inline模板，而@vue/compat包含兼容模式的编译器）。下面是具体的排查和解决步骤：

1. 先验证Webpack别名是否真的生效 #

要确认你的别名配置是否被Webpack正确应用，在入口文件里加几行代码打印Vue的版本和来源路径：

import Vue from 'vue'
console.log('Vue Version:', Vue.version)
console.log('Vue Source Path:', Vue.__file) // 这个属性会显示模块的实际文件路径

如果输出的是Vue 2.x版本，且路径指向node_modules/vue/而非node_modules/@vue/compat/，那说明别名完全没生效。

别名未生效的常见原因： #

• Webpack配置没被正确加载：Electron项目通常分主进程和渲染进程配置，确认你修改的rendererConfig是当前运行渲染进程时使用的配置文件。
• 依赖缓存干扰：删除node_modules目录和package-lock.json/yarn.lock，重新执行npm install，避免缓存导致模块解析异常。
• Resolve配置优先级冲突：确保"vue": "@vue/compat"在resolve.alias中的顺序靠前，没有其他冲突的别名或模块路径覆盖它。

2. 确认安装了@vue/compat所需的编译器依赖 #

@vue/compat需要配合Vue3的@vue/compiler-sfc编译器使用，而不是Vue2的vue-template-compiler。你需要：

• 卸载旧的编译器：

  npm uninstall vue-template-compiler
  

• 安装适配的新编译器：

  npm install @vue/compiler-sfc --save-dev
  

同时建议升级vue-loader到最新版本，旧版vue-loader无法和@vue/compiler-sfc兼容工作。

3. 检查Vue实例的模板编译方式 #

你直接在new Vue()中使用template选项，这需要运行时编译器支持。如果导入的是Vue2的runtime-only版本（默认导出），就无法编译inline模板，最终只会渲染出空注释节点<!---->。而@vue/compat的默认导出包含了运行时编译器，所以直接导入它就能正常工作。

如果确认别名生效但问题依旧，可以尝试显式指定导入包含编译器的@vue/compat版本：

import Vue from '@vue/compat/dist/vue.esm-bundler.js'

或者直接在Webpack别名中指向该文件：

resolve: {
  alias: {
    "@": path.join(__dirname, "./src/renderer"),
    "vue": "@vue/compat/dist/vue.esm-bundler.js"
  }
}

4. 验证Vue Loader的Compat配置 #

你在vue-loader中设置的compilerOptions.compatConfig.MODE: 2只对.vue文件的编译生效，不影响根组件的inline模板渲染，但确保这个配置正确，对后续升级.vue组件是必要的。

按照以上步骤排查后，应该就能解决根组件无法渲染的问题。

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