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

news2024/11/26 1:53:30

缘由

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

npm换源

检查现在的源地址 npm config get registry 使用淘宝镜像 npm config set registry https://registry.npm.taobao.org 使用官方镜像 npm config set registry https://registry.npmjs.org/

Redis-redis发布订阅、主从复制、哨兵模式、缓存穿透与雪崩学习理解

1、Redis发布订阅 下图展示了频道 channel1 &#xff0c; 以及订阅这个频道的三个客户端 —— client2 、 client5 和 client1 之间的关系&#xff1a; 当有新消息通过 PUBLISH 命令发送给频道 channel1 时&#xff0c; 这个消息就会被发送给订阅它的三个客户端&#xff1a; 1&…

ruoyi-cloud—若依微服务打包部署

1. 前端端口修改 2. 后端端口修改 &#xff08;1&#xff09;修改ruoyi-gateway服务中的bootstrap.yml的port端口 &#xff08;2&#xff09;修改ruoyi-ui中的vue.confing.js的target中的端口 3. 后端部署 (1) 在本地电脑上代码界面上打包后端 在ruoyi项目的bin目录下执行pa…

【淘宝集运攻略】省钱又省心,印尼好物海淘指南

【淘宝集运攻略】省钱又省心&#xff0c;印尼好物海淘指南&#x1f4e6;✈️ 嗨&#xff0c;亲爱的CSON们&#xff01;今天给大家分享一下淘宝集运发往印尼的超实用攻略&#xff0c;不仅省钱还省心哦&#xff01;&#x1f6cd;️&#x1f496; 1. 购物集货 &#x1f6d2; 网上…

MySQL之视图索引

学生表&#xff1a;Student (Sno, Sname, Ssex , Sage, Sdept) 学号&#xff0c;姓名&#xff0c;性别&#xff0c;年龄&#xff0c;所在系 Sno为主键 课程表&#xff1a;Course (Cno, Cname,) 课程号&#xff0c;课程名 Cno为主键 学生选课表&#xff1a;SC (Sno, Cno, Score)…

【Flutter 问题系列第 80 篇】TextField 输入框组件限制可输入的最大长度后,输入的内容中包含表情符号时,获取输入的内容数还是会超出限制的问题

这是【Flutter 问题系列第 80 篇】&#xff0c;如果觉得有用的话&#xff0c;欢迎关注专栏。 博文当前所用 Flutter SDK&#xff1a;3.10.5、Dart SDK&#xff1a;3.0.5 一&#xff1a;问题描述 在输入用户名称、简介等内容时&#xff0c;一般我们都会限制输入框内最大可输入…

手动添加测试用例配置输入参数和期望值

1.选中函数&#xff0c;点击右键选择插入测试用例。这里所选择的插入测试用例区别于之前的测试用例的地方在于&#xff0c;这里插入测试用例是手动配置的&#xff0c;之前的是自动生成的。手动配置可以自定义选择输入参数和期望值。 2.添加测试用例后&#xff0c;点击测试用例&…

Android应用开发:基础小游戏开发

手机游戏成为人们日常娱乐的重要组成部分。如果您想踏入这个充满创意和技术挑战的领域&#xff0c;制作一个Android基础小游戏是个不错的开始。以下是从零开始制作Android小游戏的基础指南。 1选择开发环境和工具 Android Studio 是官方推荐的开发环境&#xff0c;它提供了强大…

视频美颜SDK技术解析与技术对比

当下&#xff0c;各类应用和服务纷纷采用视频美颜SDK&#xff0c;以提供更加令人满意的视觉效果。本文将深入探讨视频美颜SDK的技术原理&#xff0c;同时对比不同SDK的特性&#xff0c;为开发者和决策者提供全面的技术参考。 一、技术原理解析 1.图像处理基础 视频美颜SDK基…

低代码开发:解锁数字化转型新维度

在信息化浪潮中&#xff0c;企业正面临着前所未有的挑战与机遇。一方面&#xff0c;市场环境瞬息万变&#xff0c;业务需求迭代频繁&#xff0c;对快速应用开发提出了更高要求&#xff1b;另一方面&#xff0c;传统软件开发模式受限于高成本、长周期等瓶颈&#xff0c;难以满足…

从零开始学习Zeppelin:大数据可视化分析的交互式开发系统!

介绍&#xff1a;Apache Zeppelin是一个基于Web的交互式开发系统&#xff0c;主要用于进行大数据可视化分析。其核心概念是notebook&#xff0c;所有的操作都可以在notebook中完成。Zeppelin提供了一套非常全面的数据分析解决方案&#xff0c;支持数据采集、数据发现、数据分析…

CSS||选择器

目录 作用 分类 基础选择器 标签选择器 ​编辑类选择器 id选择器 通配符选择器 作用 选择器&#xff08;选择符&#xff09;就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说&#xff0c;就是选择标签用的。 选择器的使用一共分为两步&#xff1a; 1.…

2024年1月【ORACLE战报】| 新年第一波OCP证书来了!

相关文章&#xff1a; 2023年12月【考试战报】|ORACLE OCP 19C考试通过 2023年10月【考试战报】|ORACLE OCP 19C考试通过 2023.7月最新OCP考试通过|微思-ORACLE官方授权中心 OCP 19C题库稳定&#xff01;https://download.csdn.net/download/XMWS_IT/88309681?ops_request_…

项目管理中,产品经理的角色是什么?

虽然产品经理需具备项目能力&#xff0c;但在实际操作中&#xff0c;为确保项目进度与质量&#xff0c;开发团队往往会设置一个类似项目经理的角色&#xff0c;通常由技术经理担任。这类项目经理在很大程度上仍扮演着技术领导的角色。 技术型项目经理的特点鲜明&#xff1a;他…

计算机毕业设计----SSH毕业生去向登记就业管理系统

项目介绍 本系统包含两种角色&#xff0c;管理员与学生角色&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,管理员管理,专业管理,学生管理,就业情况统计,查看就业率,修改密码等功能。 学生角色包含以下功能&#xff1a; 登陆页面,个人信息完善,就业情况登记,…

造个轮子--用Python写个编程语言-函数与基本数据结构实现

前言 okey,经过一段时间的努力&#xff0c;接下来要实现的是函数。当然还有对应的基本数据结构&#xff0c;那么之后的话&#xff0c;我们的工作就开始进一步转换了。 那么在这块我们要实现的有&#xff1a; 函数的定义String类型的实现列表类型的实现 实话实话&#xff0c…

postman后端测试时invalid token报错+token失效报错解决方案

报错信息1{“msg”:“invalid token”,“code”:401} 没有添加postman的token信息 报错信息2{“msg”: “token失效&#xff0c;请重新登录”,“code”: 401} 写了token但是token信息写的是错的,会提示token失效 解决方案如下 仅写完后端的查询,但是前端还没写的时候,可…

阿里云容器服务助力万兴科技 AIGC 应用加速

作者&#xff1a;子白&#xff08;顾静&#xff09; 2023 年堪称是 AIGC 元年&#xff0c;文生图领域诞生了 Stable Diffusion 项目&#xff0c;文生文领域诞生了 GPT 家族。一时间风起云涌&#xff0c;国内外许多企业投身 AIGC 创新浪潮&#xff0c;各大云厂商紧随其后纷纷推…

Vue3 + Electron框架读取程序外部配置文件

网上找了一堆都不行&#xff0c;根据这个步骤来肯定能用 1. 在项目下新建一个config.json文件 2. json文件中写入一些配置 3. vue.config.js中配置打包时把config.json文件copy到应用目录下 pluginOptions:{electronBuilder:{nodeIntegration:true,builderOptions: {extraReso…

lua使用resty.http做nginx反向代理(https请求,docker容器化部署集群),一个域名多项目转发

下载使用 链接&#xff1a;https://pan.baidu.com/s/1uQ7yCzQsPWsF6xavFTpbZg 提取码&#xff1a;htay –来自百度网盘超级会员V5的分享 在根目录下执行: # 从 github 上下载文件 git clone https://github.com/ledgetech/lua-resty-http.git # 将 lua-resty-http/lib/ 下的 r…