Uncaught ReferenceError: __VUE_HMR_RUNTIME__ is not defined

报错背景

Vue脚手架初始化Vue3.x项目的时候，为了减小打包生成的体积，而使用了使用CDN方式引入Vue。导致报错。

报错原因

我引入的是 vue.global.prod.js

这个包是生产的包，生产包是修改过的包，其中并不包含关于开发时热重载的相关代码，因此这里报错。

解决办法

开发环境使用 vue.global.js

生产环境使用 vue.global.prod.js

配置实例

1、在 public 目录下的 index.html 文件里，head 标签中添加下面代码。

-- --- ---- - -- ----------------------------- -- --------------------------------- - --
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
-- - --

2、在 vue.config.js 中，添加下面代码。

'use strict';

------.exports = {
	chainWebpack: config => {
		------.plugin('html').tap(args => {
			----[0].cdn = {
				js: [
					`https://unpkg.com/vue@3.3.7/dist/vue.global${ process.env.NODE_ENV === 'development' ? '' : '.prod' }.js`
				]
			};
			return ----;
		});
	},
	configureWebpack: {
		externals: {
			'vue': 'Vue',
		}
	}
}