【问题+解决】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>

大家想用直接复制就行。

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/329769.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker-compose和docker compose的区别

在docker实际使用中&#xff0c;经常会搭配Compose&#xff0c;用来定义和运行多个 Docker 容器。使用时会发现&#xff0c;有时候的指令是docker-compose&#xff0c;有时候是docker compose&#xff0c;下面给出解释。 docker官方文档&#xff1a;https://docs.docker.com/c…

flutter 客户端日志上传定位错误信息

背景 flutter 开发的app 安装到真机上 无法定位报错信息&#xff0c;只能使用usb连接电脑 使用adb logcat来查看日志效率低下。 想法 如果将flutter 开发的app 运行的时候 将日志写进一个日志文件里面去&#xff0c;然后给flutter app搭建一个http服务器&#xff0c;后端知道对…

Windows 11 系统 安装MySQL

Windows 11 系统 安装MySQL 1.下载2.安装3.配置4.环境变量5.检验 1.下载 网址&#xff1a;https://www.mysql.com/ 2.安装 3.配置 4.环境变量 在电脑上找到系统属性 C:\Program Files\MySQL\MySQL Server 8.0\bin5.检验 Win R 键 mysql -uroot -p

c++多态与虚函数

多态是什么&#xff1f; 多态&#xff08;Polymorphism&#xff09;是面向对象编程中的一个核心概念&#xff0c;它来源于希腊语&#xff0c;意为“多种形态”。 从字面意思理解&#xff0c;多态是指函数有多种形态&#xff08;实现&#xff09;。换句话说&#xff0c;运行阶段…

【项目实战】Postgresql数据库中出现锁表如何解决

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列专栏目录 [Java项目…

地震预测系统项目实现

整个项目思路即在一组观测数据中&#xff0c;地震专家&#xff08;即用户&#xff09;输入观测窗口的最小数量和最大数量&#xff0c;进行预测峰值点 数据文件如图所示&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include<fstream> #include<string> #include&…

IOS-高德地图SDK接入-Swift

申请key 这个要前往高德开发平台注册成为个人开发者然后在控制台创建一个应用&#xff1a; 高德开发平台 注册步骤就不写了&#xff0c;写一下创建应用的步骤&#xff1a; 1、点击应用管理——>我的应用 2、点击右上角的创建新应用 3、输入内容&#xff1a; 4、点击添加ke…

在全志T113-i平台上实现H.265视频解码步骤详解

H.265&#xff0c;也被称为HEVC(HighEfficiency Video Coding)&#xff0c;作为H.264的继任者&#xff0c;提供了更好的视频压缩和更高的视频质。H.265通过引入更多先进的编码技术&#xff0c;如更强大的运动估计和更高效的变换编码&#xff0c;对比H.264进行了改进。这些改进使…

设计大师的秘密武器:色彩搭配的奇妙技巧

在设计中&#xff0c;色彩搭配扮演着至关重要的角色。色彩搭配的选择和设计是设计师创作过程中不可或缺的一部分。本文将介绍色彩搭配的重要性&#xff0c;如何设计出令人惊叹的色彩搭配以及色彩对设计师的作用。 色彩卡 | 一个覆盖广泛主题工具的高效在线平台(amd794.com) h…

月薪2W的软件测试工程师,到底是做什么的?

在生活中&#xff0c;我们常常会遇到以下几种窘迫时刻&#xff1a; 准备骑共享单车出行&#xff0c;却发现扫码开锁半天&#xff0c;车子都没有反应&#xff1b;手机导航打车&#xff0c;却发现地图定位偏差很大&#xff0c;司机总是跑错地方&#xff1b;买个水&#xff0c;却…

一个小程序跳转到另一个小程序中如何实现

小程序 保证两个小程序是一样的主体才可以跳转。怎么知道是不是同样的主体呢&#xff1f; 小程序的后台管理-设置-基本设置-基本信息。查看主体信息。 跳转 <button clicktoOtherMini()>跳转到另一个小程序</button> function toOtherMini(){wx.navigateToMini…

Revealing the Dark Secrets of MIM

论文名称&#xff1a; Revealing the Dark Secrets of Masked Image Modeling 发表时间&#xff1a;CVPR2022 作者及组织&#xff1a;Zhenda Xie, Zigang Geng, Hu Han等&#xff0c;来自清华&#xff0c;中科院&#xff0c;微软亚洲研究院。 前言 本文尝试探讨MIM为何有效的原…

数据库的安全管理

数据库的安全管理 一、实验目的 掌握用户账号的创建、查看、修改、删除的方法。掌握用户权限设置方法。掌握角色的创建、删除方法。 二、实验内容用户账号的创建、查看、修改、删除的SQL语句。用户权限设置SQL语句。角色的创建、删除SQL语句。 三、实验步骤在本地主机创建用户…

使用vite框架封装vue3插件,发布到npm

目录 一、vue环境搭建 1、创建App.vue 2、修改main.ts 3、修改vite.config.ts 二、插件配置 1、创建插件 2、开发调试 3、打包配置 4、package.json文件配置 5、执行打包命令 pnpm build 6、修改index.d.ts 目录 一、vue环境搭建 1、创建App.vue 2、修改main.ts 3…

NOIP2018提高组day2 - T1:旅行

题目链接 [NOIP2018 提高组] 旅行 题目描述 小 Y 是一个爱好旅行的 OIer。她来到 X 国&#xff0c;打算将各个城市都玩一遍。 小 Y 了解到&#xff0c;X 国的 n n n 个城市之间有 m m m 条双向道路。每条双向道路连接两个城市。 不存在两条连接同一对城市的道路&#xff…

企事业单位宣传任务的考核稿和投稿有哪些网站?

企事业单位在宣传任务方面扮演着重要角色&#xff0c;他们不仅要向公众展示自己的实力和影响力&#xff0c;也需要提高自己的知名度和形象。在这个信息化时代&#xff0c;涌现出了许多网络平台&#xff0c;为企事业单位提供了更多的宣传机会。本文将介绍一家被广泛认可的投稿平…

模型Model:文件系统模型QFileSystemModel

一、 1、常用函数 QFileSystemModel自带目录变化监听 1)、 QModelIndex setRootPath(const QString &path); 设置检索根目录 2)、 bool isDir(const QModelIndex &index) const; 选中索引是否为目录节点 3)、 QString filePath(const QModelIndex &index) const;…

算法和数据结构--树状数组

概念&#xff1a; 树状数组的初衷是解决状态压缩空间里的累积频率&#xff0c;现在多用于求前缀和与后缀和(方便计算)&#xff0c;它可以以 O(logN)的时间得到任意前缀和&#xff0c;并同时支持在 O(logN)时间内支持动态单点值的修改。空间复杂度 O(N)。 树状数组的引用&#…

如何根据自己的数据集微调一个 Transformer 模型

将通过 NLP 中最常见的文本分类任务来学习如何在自己的数据集上利用迁移学习&#xff08;transfer learning&#xff09;微调一个预训练的 Transformer 模型—— DistilBERT。DistilBERT 是 BERT 的一个衍生版本&#xff0c;它的优点在它的性能与 BERT 相当&#xff0c;但是体积…

Unity3d C#实现场景编辑/运行模式下3D模型XYZ轴混合一键排序功能(含源码工程)

前言 在部分场景搭建中需要整齐摆放一些物品&#xff08;如仓库中的货堆、货架等&#xff09;&#xff0c;因为有交互的操作在单个模型上&#xff0c;每次总是手动拖动模型操作起来也是繁琐和劳累。 在这背景下&#xff0c;我编写了一个在运行或者编辑状态下都可以进行一键排序…