【问题+解决】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>
相关推荐
Hexene...1 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情1 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258591 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
前端小趴菜054 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
P7Dreamer4 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
I'm写代码4 小时前
el-tree树形结构笔记
javascript·vue.js·笔记
斯~内克5 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
sunbyte5 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee1015 小时前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒296 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js