elementUI CDN引入本地文件报错,刷新页面报错

 报错原因:vue.config.js的externals 配置中有外部cdn引入配置,而当前场景我的element是直接下载放在本地的,这时就需要将配置注释或者删除

webpack 中的 externals 配置项用于指定在打包时需要排除掉的模块,这些模块会被视为外部依赖,即不会被打包进最终的输出文件中,而是通过其他方式引入。

使用 externals 配置项可以使得打包后的代码文件更小,同时也可以在运行时从外部获取依赖,例如通过 CDN、全局变量或者通过 require 的方式等。

举个例子,假设我们需要在项目中引入 jquery 库,但我们并不想在打包的过程中将其打包进最终的输出文件中,而是从外部引入。我们可以通过以下的配置来实现:

module.exports = {  // ...  externals: {    jquery: 'jQuery'  }};

这里的 externals 配置项告诉 webpack 在打包时忽略 jquery 模块的引用,而在代码运行时,我们需要手动将 jquery 通过 script 标签引入,并将其暴露在全局变量 jQuery 下,例如:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>  window.jQuery = jQuery;</script>

这样在代码中引入 jquery 模块时, webpack 就会将其作为外部依赖进行处理,而不是将其打包进输出文件中。

需要注意的是,使用 externals 配置项需要谨慎,因为如果在运行时无法正确获取到指定的外部依赖,就会导致代码运行出错

文章引用:百度安全验证

解决办法二

由于element UI 官网中CDN引入的地址都需要挂梯子才能正常加载,这就导致我们项目老是打不开或者加载很慢 ,不得不去将资源下载放在本地,这时就出现上面的错误了,这时我们还可以用bootCDN的地址来引入 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

再或者直接npm安装,但记得修改vue.config.js中的配置 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Python从图像中提取表格

有什么作用? 与深度学习解决方案相比,这个轻量级的包不需要训练和最小化参数化。它提供了以下功能: 识别图像和PDF文件中的表格,包括在表格单元级别的边界框。 通过支持OCR服务/工具(Tesseract、PaddleOCR、AWS Textract、Google Vision和Azure OCR目前支持)来提取表格内…

葡萄糖调节蛋白78/结合免疫球蛋白酶联免疫检测试剂盒Grp78/BiP ELISA kit

葡萄糖调节蛋白(GRP78)也称为结合免疫球蛋白或BiP&#xff0c;是内质网的常驻分子伴侣&#xff0c;参与蛋白质的折叠和组装&#xff0c;新合成的多肽穿过内质网膜的转运&#xff0c;钙稳态的调节和靶向错误折叠的蛋白质进行降解。GRP78还通过结合内质网腔内的N-末端结构域来调节…

CMU\谷歌等最新研究综述:面向通用机器人的基础模型

构建能够在任何环境中无缝操作、使用各种技能处理不同物体和完成多样化任务的通用机器人&#xff0c;一直是人工智能领域的长期目标。然而&#xff0c;不幸的是&#xff0c;大多数现有的机器人系统受到限制——它们被设计用于特定任务、在特定数据集上进行训练&#xff0c;并在…

sql_lab之sqli中的head头注入,less18

报错注入中的head注入&#xff08;less-18&#xff09; 1.输入用户名和密码123 123显示登录错误 2.输入用户名和密码123’ 123显示登录错误 则证明不是普通报错注入&#xff0c;因为有用户名和密码框&#xff0c;如果不是普通报错注入则尝试head注入 3.用burp进行爆破&#x…

P2 H264码流结构分析——Annexb与MP4格式的区别 (中)

前言 从本章开始我们将要学习嵌入式音视频的学习了 &#xff0c;使用的瑞芯微的开发板 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《Linux C应用编程&#xff08;概念类&#xff09;_Ch…

图像畸变校正解决方案,无畸变的高质量视觉体验

摄像头已经成为我们生活中不可或缺的一部分。然而&#xff0c;由于摄像头的物理特性和环境因素&#xff0c;采集到的图像往往存在径向和切向畸变&#xff0c;导致画面扭曲&#xff0c;影响视觉效果。为了解决这个问题&#xff0c;美摄科技推出了一款先进的图像畸变校正解决方案…

亚洲诚信TrustAsia成功入选《第十四批上海市重点商标保护名录》

近日&#xff0c;为进一步加大注册商标专用权的保护力度&#xff0c;上海市知识产权局制定并发布了《第十四批上海市重点商标保护名录》&#xff0c;亚数信息科技&#xff08;上海&#xff09;有限公司&#xff08;以下简称亚数&#xff09;榜上有名&#xff0c;注册商标“亚洲…

健身俱乐部官网搭建的作用是什么

健身俱乐部是不少人常去场所&#xff0c;以会员和散客为主&#xff0c;这些场所在大城市商圈中较为常见也有很高的需求度&#xff0c;入局商家也比较多&#xff0c;但在实际经营中商家们也会不可避免的面临一些难题。 1、拓客难 健身俱乐部客群有一定年龄限制&#xff0c;同时…

面试高频的TCP知识点总结,比我想象得还要详细

下午好&#xff0c;我的网工朋友。 TCP 作为传输层的协议&#xff0c;了解它&#xff0c;拿下它&#xff0c;是一个网络工程师素养的体现&#xff0c;也是面试中经常被问到的知识点。 我们账号之前的文章里也写过不少关于TCP相关的文章&#xff0c;感兴趣的朋友们可以点击下方…

【数据结构】九、排序

目录 一、排序概述 二、插入排序 2.1直接插入排序 2.2折半插入排序 2.3二路插入排序 2.4表插入排序 2.5希尔排序 三、交换排序 3.1冒泡排序 3.2快速排序 四、选择排序 4.1简单选择排序 4.2锦标赛排序 4.3堆排序 五、归并排序 六、基数排序 七、总结 一、排序概述…

接口测试用例设计(超详细总结)

一、为什么要写接口测试用例&#xff1f; &#xff08;1&#xff09;理清思路&#xff0c;避免漏测和重复测试。 &#xff08;2&#xff09;提高测试效率、跟进测试进度、告诉领导做过、跟进重复性工作。 &#xff08;3&#xff09;更好的记录问题、发现问题、复现问题、同时…

在Latex中显示中文

推荐由overleaf提供的Latex学习材料&#xff1a;Chinese - Overleaf, Online LaTeX Editor 推荐使用XeLaTeX或者LuaLaTeX编译器(compilers)&#xff0c;因为它们直接支持UTF-8编码文本并使用TrueType和OpenType字体。 目录 一、使用ctexart document类 &#xff08;推荐使用…