element在线运行网站codepen报错：Uncaught ReferenceError: Vue is not defined

目录

一、问题

二、解决方法

三、总结

---

一、问题

在Element - The world's most popular Vue UI framework官网中点击一个例子  右下角的  ”在线运行“，跳转到在线运行网站codepen，发现无法正常运行代码。并且js文件中报错 ：Uncaught ReferenceError: Vue is not defined。Element - The world's most popular Vue UI framework

详细错误如图1-1所示

图 1-1

二、解决方法

1.打开控制台发现还报错：Failed to load resource: the server responded with a status of 404 () unpkg.com/vue@3.2.33/dist/vue.js:1，如图1-1下方红色矩形框中的内容所示——(找不到vue.js文件)

2.复制图1-1左边 html中第一行script中的url:unpkg.com/vue/dist/vue.js,在浏览器中打开。还真的没有东西，而且自动打开了vue.js的3.2.33版本，如图2-1所示。

图 2-1

 3.unpkg.com是一个用于快速下载、访问  npm官网中依赖包的网站。但是有可能更新没有跟上npm官网，所以会有npm 发布了新版本，而unpkg.com中找不到的问题。现在遇到的就是这个问题。

4.codepen中引入了vue，默认加载的是 npm官网中的最新版本3.2.33，但是unpkg.com中还没有更新，所以找不到这个文件。

猜测unpkg.com每次仅更新到 稳定版本。因为自己测试了vue 2.6.14（如图2-2，vue的官方稳定版本）版本以上的均无法通过unpkg.com访问到（你也可以自己试一试^--^)。

图 2-2

图 2-3

 5.无法运行原因及解决方法

1）无法运行原因：vue版本过高

2）解决方法：指定vue版本为2.6.14及以下版本即可。

修改图1-1左侧 html代码中第一行为 <script src="//unpkg.com/vue@2.6.14/dist/vue.js"></script> 即可正常运行，如图2-4所示，没有报错了，且项目能够正常运行。

改成2.6.14以下的版本也是可以的。

三、总结

1.又是一个和下载的依赖的版本过高有关的问题
。可能是codepen的开发人员没有注意这个问题，不知道之前有没有报错，反正我今年打开都报错。拖到现在才解决，总算是解决了。

2.Module parse failed:xxxx也是和依赖的版本过高有关，有兴趣可以看看^--^

error in ./node_modules/_mqtt@4.3.7@mqtt/lib/client.js Module parse failed:_琹箐的博客-CSDN博客https://blog.csdn.net/qq_45327886/article/details/123556916

3.有问题的时候，看一下控制台报错还是很有必要的！

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/

---------------------------------------------------------------------------------------------------------------------------------@@@回复相关问题及图解

1.m0_48114060提到的问题：el-switch不能正常显示

2.zerogzs提到的问题：换成低版本依然无效，请先检查你指定的版本在 unpkg.com是否存在.

具体方法：复制 src中的内容，在浏览器打开，有内容则表示改版本存在，没有内容则表示改版本不存在。