使用公共CDN服务引入Vue3.0时遇到的问题

最近尝试使用vue-cli4创建项目,选择使用vue3.0版本进行开发。之前使用vue2时,为了优化性能使用CDN引入了相关包,因此新的项目也打算采用相同的方式。然而vue3并没有向2.0版本使用UMD模块化,因此在公共库CDN网站中会发现有多个版本可以选择,例如vue.cjs.js,vue.esm-browser.js,vue.global.js等等。由于自己不懂它们有何区别,在用script标签引入时出现了类似Uncaught ReferenceError: vue is not defined的种种报错。

最开始选择引入vue.cjs.js时,浏览器出现了如下的报错:
Uncaught ReferenceError: exports is not defined
这里的cjs是CommonJS的简写,说明因为某种原因浏览器不支持CommonJS规范,或者不能通过script标签引入(具体原因还不清楚)。

接着我看到了vue.esm-browser.js,引入后浏览器又报错了:
Uncaught SyntaxError: Unexpected token 'export'
esm是浏览器使用的模块规范。也没明白为什么引入esm和cjs都会报错。
注意:esm要在script标签中加上 type="module"

最后经过测试,vue.global.js(包含编译器和运行时)和vue.runtime.global.js(运行时版本)都可以使用,并且没有报错。

上面几个版本中都有prod后缀的链接可以选择,估计是和min类似的经过压缩的版本。

最奇怪的是,在最开始有出现过Uncaught ReferenceError: __VUE_HMR_RUNTIME__ is not defined 的报错,到后来又莫名其妙的消失了,真的是一头雾水。

你可能感兴趣的:(使用公共CDN服务引入Vue3.0时遇到的问题)