使用公共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 的报错,到后来又莫名其妙的消失了,真的是一头雾水。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容