关于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文件，满足性能和速