关于vue __VUE_HMR_RUNTIME__ is not defined报错处理

本人在基于vite+vue3+多入口项目中，采用cdn引入vue3以及vueRouter依赖，在项目开发过程中出现__VUE_HMR_RUNTIME__ is not defined报错的处理方法。

问题再现

在项目开发时，项目启动后，如果修改了模板部分相关代码，vscode控制台提示热更新，但是页面在浏览器控制台出现报错，导致页面无法渲染出来，不得不重新启动，非常影响开发。

原理分析

实际开发中，在本地开发环境中，Vite的@vitejs/plugin-vue插件在编译单文件组件(SFC)时，默认会从本地node_modules加载Vue依赖。

当同时存在CDN引入时：

​开发环境​：插件生成的运行时代码引用本地Vue的响应式API（如ref/reactive）
​页面运行​：实际执行的Vue实例来自CDN全局变量Vue
这会导致响应式系统被割裂，数据变更无法触发视图更新。

所以打包以后，页面运行在配置external之后，只全局依赖cdn的vue。不会出现问题。那么在本地开发时，出现的问题就出现在引入的cdn的vue上。

当前代码

由于我的vite配置中，采用了预渲染配置。

resolve: {alias: {"@": resolve(__dirname, "./src"),// 别名配置确保 Vite 使用正确的 Vue 版本vue: "vue/dist/vue.esm-bundler.js"}},

vue/dist/vue.esm-bundler.js 这个就是本地修改vue的对应的渲染解析采用了bundle版本，而非之前默认的runtime版本(即会预先解析本地的vue文件，满足性能和速度的需要)，bundle则值完整版，支持直接把页面内容局部渲染进去页面已有的html的某个局部(这就是我所谓的预渲染)。

rollupOptions: {external: ["vue", "vue-router"]},

这个是我external打包时排除的依赖。

cdn配置，采用自己项目搭建的私服静态资源。采用vite-plugin-html插件向页面注入依赖资源。

<%- commonVue %> 这个是页面静态资源加载占位符，多个页面入口则统一采用该占位符来加载vue。

项目运行后，会向页面注入引用路径。

vue.global.prod.js 这个是我们从vue依赖包dist目录下拷贝出来的版本，如果我们在注入cdn地址时，采用是这个版本，即prod这个版本，则会出现上述，__VUE_HMR_RUNTIME__ is not defined报错问题。

解决问题

那么问题就出在，CDN引入的Vue会注册全局变量Vue，而本地Vue可能通过ES模块导入。当两者版本不一致时：

组件编译​：使用本地Vue的编译器
​运行时​：使用CDN的Vue实例
这种版本差异可能导致API行为不一致（如Vue 3.2与3.3的响应式实现差异）

所以接下来，就分析这个差异性导致的问题。

Vite开发服务器依赖原生ESM，模块解析​时浏览器直接加载node_modules中的Vue，在HMR热更新​时需要与本地Vue建立连接，CDN版本vue.global.prod.js时，会缺失__VUE_HMR_RUNTIME__等开发环境专用变量，而CDN的vue.global.js版本则含有相关环境专用变量。

所以我们如果采用cdn引入vue的方案，则可以在开发环境和打包后的生产或者测试预发等环境采用prod版本。

所以我们本地vite-plugin-html配置区分环境变量，来设置不同版本的vue。

const filename = mode === "development" ? "vue.global.js" : "vue.global.prod.js";
return `<script src="${host}${cdnbaseUrl}/${filename}"></script>`;

如此以上问题得到解决。

以上问题得到解决，出现如下提示。则没有问题了。