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中的配置 

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

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

相关文章

bugku-misc-这是一张单纯的图片

附件&#xff1a;图片 1、查看属性 2、010 whex打开看看 可以看到html编码&#xff0c;将文件后缀&#xff0c;改成html&#xff0c;打开 即可

蓝牙物联网与嵌入式开发如何结合?

蓝牙物联网与嵌入式开发可以紧密结合&#xff0c;以实现更高效、更智能的物联网应用。以下是一些结合的方式&#xff1a; 嵌入式开发为蓝牙设备提供硬件基础设施和控制逻辑&#xff1a;嵌入式系统可以利用微处理器和各种外设组成的系统&#xff0c;为蓝牙设备提供硬件基础设施和…

FastGPT+ChatGLM3-6b搭建知识库

前言&#xff1a;我用fastgpt直接连接chatglm3&#xff0c;没有使用oneai&#xff0c;不是很复杂&#xff0c;只需要对chatglm3项目代码做少量修改就能支持使用embeddings&#xff0c;向量模型用的m3e&#xff0c;效果还可以 我的配置&#xff1a; 处理器&#xff1a;i5-13500 …

web前端html笔记2

新增状态标签<meter><progress> <meter> 属性 值 描述 high 数值 规定高值 low 数值 规定低值 max 数值 规定最大值 min 数值 规定最小值 optimum 数值 规定最优值 value 数值 规定当前值 <body> <meter high"50" …

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextInput输入框组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之TextInput输入框组件 一、操作环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、TextInput 接口 TextInput(value?:{placeholder?: ResourceStr, tex…

NIO的实战教程(简单且高效)

1. 参考 建议按顺序阅读以下三篇文章 为什么NIO被称为同步非阻塞&#xff1f; Java IO 与 NIO&#xff1a;高效的输入输出操作探究 【Java.NIO】Selector&#xff0c;及SelectionKey 2. 实战 我们将模拟一个简单的HTTP服务器&#xff0c;它将响应客户端请求并返回一个固定的…

【EI会议征稿】2024年光电信息与光学工程国际学术会议(OIOE 2024)

2024年光电信息与光学工程国际学术会议&#xff08;OIOE 2024&#xff09; 2024 International Conference on Optoelectronic Information and Optical Engineering 光电信息技术和光学工程技术广泛应用于国民经济和国防建设的各行各业。近年来&#xff0c;随着相关产业的迅…

AcWing算法提高课-1.4.2股票买卖 IV

算法提高课整理 CSDN个人主页&#xff1a;更好的阅读体验 原题链接 题目描述 给定一个长度为 n n n 的数组&#xff0c;数组中的第 i i i 个数字表示一个给定股票在第 i i i 天的价格。 设计一个算法来计算你所能获取的最大利润&#xff0c;你最多可以完成 k k k 笔交易…

2024年你的年度目标OKR制定好了吗?

标题2023年余额见底&#xff0c;2024年的FLAG都制定好了吗&#xff1f; 目标很明确&#xff0c;计划很丰满&#xff0c;执行起来又处处透着一点点乏力&#xff0c;怎么办&#xff1f; 2024年可以尝试用OKR制定目标。 OKR目标管理方法&#xff0c;既适用于企业&#xff0c;也…

智能优化算法应用:基于卷尾猴算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于卷尾猴算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于卷尾猴算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.卷尾猴算法4.实验参数设定5.算法结果6.参考文…

前端案例—antdDesign的Select多选框组件加上全选功能

前端案例—antdDesign的Select多选框组件加上全选功能。 实现效果如下&#xff1a; Select 组件里有这个属性&#xff0c;可以利用这个对下拉菜单进行自定义。 const handleChange (e, value) > {setSelectState(e.target.checked)let arr productOptions?productOption…

嵌入式系统复习--ARM指令集(二)

文章目录 上一篇ARM指令详细介绍数据处理指令Load/Store指令转移指令异常中断指令协处理器指令下一篇 上一篇 嵌入式系统复习–ARM指令集&#xff08;一&#xff09; ARM指令详细介绍 分类 数据传送指令算术运算指令逻辑运算指令比较指令测试指令乘法指令 二进制编码格式 #…

Ubuntu 22.04 禁用(彻底移除)Snap

什么是Snaps Snaps 是 Ubuntu 的母公司 Canonical 于 2016 年 4 月发布 Ubuntu 16.04 LTS&#xff08;Long Term Support&#xff0c;长期支持版&#xff09;时引入的一种容器化的软件包格式。自 Ubuntu 16.04 LTS 起&#xff0c;Ubuntu 操作系统可以同时支持 Snap 及 Debian …

Python之Django项目的功能配置

1.创建Django项目 进入项目管理目录&#xff0c;比如&#xff1a;D盘 执行命令&#xff1a;diango-admin startproject demo1 创建项目 如果提示diango命令不存在&#xff0c;搜索diango-admin程序的位置&#xff0c;然后加入到环境变量path中。 进入项目&#xff0c;cd demo…

了解XSS、CSRF攻击这一篇就够了

目录 XSS攻击XSS概念XSS案例XSS攻击类型反射型存储型 总结 CSRFCSRF概念CSRF防御方式一&#xff1a;跨域禁止携带cookie方式二&#xff1a;设置SameSite属性为Strict方式三&#xff1a;验证Referer字段&#xff08;利用浏览器功能&#xff09;方式四&#xff1a;Token XSS攻击 …

深入理解 JavaScript 函数:提升编程技能的必备知识(中)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

WPF组合控件TreeView+DataGrid之DataGrid封装

&#xff08;关注博主后&#xff0c;在“粉丝专栏”&#xff0c;可免费阅读此文&#xff09; wpf的功能非常强大&#xff0c;很多控件都是原生的&#xff0c;但是要使用TreeViewDataGrid的组合&#xff0c;就需要我们自己去封装实现。 我们需要的效果如图所示&#x…

【MAC、IOS】charles抓包配置教程,亲测有效

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

4.3【共享源】克隆实战开发之截屏(一)

一,Screen截屏介绍 Screen的截屏是指从源读取像素,然后复制到缓冲区。然后可以根据需要操纵缓冲区;它可以简单地写入文件,也可以在其他窗口或显示器中使用。 Screen API从源中读取像素,并将其复制到提供的缓冲区中以捕获截屏。缓冲区可以是pixmap或窗口缓冲区,但必须设…

UE5 Landscape 制作GIS卫星图地形

1. 总体想法&#xff1a; 制作GIS地形&#xff0c;使用Landscaping MapBox是一个好方法&#xff0c;但是区域过大&#xff0c;会占用很多内存 https://blog.csdn.net/qq_17523181/article/details/135029614 如果采用QGis&#xff0c;导出卫星图&#xff0c;在UE5里拼合出地形…