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

缘由

笔者在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>

大家想用直接复制就行。

bash 复制代码
<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>
相关推荐
天翼云开发者社区3 分钟前
动态加速中优化失败路径反馈的方法
cdn·全站加速
LuckySusu5 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
LuckySusu14 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu14 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu15 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
LuckySusu18 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
今天头发还在吗31 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
铅笔侠_小龙虾1 小时前
深入理解 Vue.js 原理
前端·javascript·vue.js
你的眼睛會笑1 小时前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
无光末阳2 小时前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js