【问题+解决】axios/vue/element/echarts引入报错

最新推荐文章于 2024-03-23 19:47:00 发布

湘水狱

最新推荐文章于 2024-03-23 19:47:00 发布

阅读量754

点赞数 6

分类专栏：报错盒 npm 文章标签： vue.js cdn unpkg

本文链接：https://blog.csdn.net/weixin_45527702/article/details/135652730

版权

报错盒同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

npm

5 篇文章 0 订阅

订阅专栏

作者在HTML页面上使用unpkg引入Vue和Element-UI等库时遇到加载慢、接口超时及样式问题，经排查发现应使用CDN正确引入，分享了替换后的正确链接。

摘要由CSDN通过智能技术生成

缘由

笔者在html页面引用vue来快速实现页面；<head></head>中通过<script>src=""></script>方法引入，开始引入，应用都是正常，后来用了也没问题；奇怪的是，前几天发现html页面无法出现效果图
更新线上项目发现，html页面加载慢；接口请求超时；页面样式也出现了问题；

当时的引入unpkg

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

排查

经过排查就是这种的引入方式失效了，引入当时也是根据官方文档引入的，纳闷了，之前还好好的，怎么突然出问题了；

排查发现这种的引入不是正确的，记得之前引入，是cdn，排查发下，它的引入方式是unpgk，进而导致的

正确的引入cdn

替换内容
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="http://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

大家想用直接复制就行。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
 <script src="http://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>