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

news2025/1/31 2:57:57

 报错原因: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.coloradmin.cn/o/1329723.html

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

相关文章

深入解析Python装饰器及*args, **kwargs的妙用

深入解析Python装饰器及*args, **kwargs的妙用 简介&#xff1a; ​ 装饰器&#xff08;Decorator&#xff09;是 Python 中一种强大的语法特性&#xff0c;它允许在不修改原始函数代码的情况下&#xff0c;动态地扩展函数的功能。装饰器是函数或类&#xff0c;用于包装其他函…

One Wire协议应用篇(c语言板)

一.项目简介 利用DS18B20实时检测温度并显示在LCD1602显示屏上&#xff0c;同时可以通过K1,K2,K3,K4设置最高温度和最低温度利用AT24C02可以实现掉电不丢失&#xff0c;最后当检测温度大于或小于最高温时&#xff0c;会在LCD1602显示屏上显示OV:H或OV:L。 二.准备材料 AT89C52、…

扩展检测和响应:零信任安全的核心要素

面对不断增长的攻击面&#xff0c;扩展和增强威胁检测和响应能力是XDR在安全功效方面的主要结果。这一成果不仅有助于全面保护&#xff0c;而且有助于更好地实施零信任安全。 默认情况下&#xff0c;这种方法不信任任何用户或任何设备&#xff0c;只允许访问需要的资源。为了更…

智能优化算法应用:基于人工大猩猩部队算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于人工大猩猩部队算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于人工大猩猩部队算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.人工大猩猩部队算法4.实验参…

分布式搜索elasticsearch概念

什么是elasticsearch&#xff1f; elasticsearch是一款非常强大的开源搜索引擎&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 目录 elasticsearch的场景 elasticsearch的发展 Lucene篇 Elasticsearch篇 elasticsearch的安装 elasticsearch的场景 elasticsear…

python画图【00】Anaconda和Pycharm和jupyter的使用

①Anaconda ②Pycharm 一、Anaconda安装步骤 1、双击安装包&#xff0c;点击next。 2、点我同意I agree 3、 4、选择需要安装的位置&#xff0c;位置可根据自己情况安装到具体位置&#xff0c;但要记住安装到了哪里。然后点击next 5、可选择加入到环境变量&#xff0c;…

C# 判断两个时间段是否重叠

public static bool IsOverlap(DateTime startTime1, DateTime endTime1, DateTime startTime2, DateTime endTime2){// 判断两个时间段是否有重叠return !(endTime1 < startTime2 || startTime1 > endTime2);//根据德摩根定律&#xff0c;等效为&#xff1a;endTime1 &g…

如何通过蓝牙串口启动智能物联网?

1、低功耗蓝牙(BLE)介绍 BLE 技术是一种低成本、短距离、可互操作的鲁棒性无线技术&#xff0c;工作在免许可的 2,4 GHZ 工业、科学、医学(Industrial Scientific Medical&#xff0c;ISM)频段。BLE在设计之初便被定位为一种超低功耗(Ultra Low Power&#xff0c;ULP)无线技术&…

Apache Flink 进阶教程(六):Flink 作业执行深度解析

目录 前言 Flink 四层转化流程 Program 到 StreamGraph 的转化 StreamGraph 到 JobGraph 的转化 为什么要为每个 operator 生成 hash 值&#xff1f; 每个 operator 是怎样生成 hash 值的&#xff1f; JobGraph 到 ExexcutionGraph 以及物理执行计划 Flink Job 执行流程…

CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem:Webpack5 升级后相关插件和配置更新说明

前言 项目对应的 webpack5 版本如下&#xff1a; npm i webpack5.89.0 -D npm i webpack-cli5.1.4 -D升级插件 说明一下&#xff0c;我更喜欢固定版本号&#xff0c;这样随机bug会少很多&#xff0c;更可控~ npm i postcss-loader6.1.1 -D npm i postcss-pxtorem6.0.0 -D配…

Redis单机、主从、哨兵、集群配置

单机配置启动 Redis安装 下载地址&#xff1a;Download | Redis 安装步骤&#xff1a; 1: 安装gcc编译器&#xff1a;yum install gcc 2: 将下载好的redis‐5.0.3.tar.gz文件放置在/usr/local文件夹下&#xff0c;并解压redis‐5.0.3.tar.gz文件 wget http://download.re…

编译原理----算符优先级的分析(自底向上)

自底向上分析的分类如下所示&#xff1a; 算符优先分析 算符优先分析只规定算符之间的优先关系&#xff0c;也就是只考虑终结符之间的优先关系。 &#xff08;一&#xff09;若有文法G&#xff0c;如果G没有形如A->..BC..的产生式&#xff0c;其中B和C为非终结符&#xff…

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…

vue3使用echarts漏斗,根据数据计算比例大小

需求&#xff1a;我们在开发过程中会遇到漏斗图的使用&#xff0c;如果用echarts里面自带的算法绘制渲染漏斗图时候&#xff0c;如果后端给的数据相差不大很接近时候&#xff0c;漏斗图渲染的结果不明显看不出来变化的。 优化之前的漏斗图&#xff1a; 优化之后的漏斗图&…

Flink 运行时[Runtime] 整体架构

一、基本组件栈 在Flink整个软件架构体系中&#xff0c;同样遵循着分层的架构设计理念&#xff0c;在降低系统耦合度的同时&#xff0c;也为上层用户构建Flink应用提供了丰富且友好的接口。从下图中可以看出整个Flink的架构体系基本上可以分为三层&#xff0c;由上往下依次是 …

BUUCTF-Linux Labs

Linux Labs 根据题目给出的内容&#xff0c;在kali中连接靶机&#xff0c;输入密码进入命令行模式 ls发现什么都没有&#xff0c;有可能进入到了一个空文件夹 cd .. 切换到上一层目录&#xff0c;ls查看此目录下的内容&#xff0c;发现flag.txt文件&#xff0c;查看文件是flag …

nodejs+vue+微信小程序+python+PHP医疗机构药品及耗材信息管理系统-计算机毕业设计推荐

为了帮助用户更好的了解和理解程序的开发流程与相关内容&#xff0c;本文将通过六个章节进行内容阐述。 第一章&#xff1a;描述了程序的开发背景&#xff0c;程序运用于现实生活的目的与意义&#xff0c;以及程序文档的结构安排信息&#xff1b; 第二章&#xff1a;描述了程序…

OpenCV与YOLO学习与研究指南

引言 OpenCV是一个开源的计算机视觉和机器学习软件库&#xff0c;而YOLO&#xff08;You Only Look Once&#xff09;是一个流行的实时对象检测系统。对于大学生和初学者而言&#xff0c;掌握这两项技术将大大提升他们在图像处理和机器视觉领域的能力。 基础知识储备 在深入…

【第七在线】数据分析与人工智能在商品计划中的应用

随着技术的不断进步&#xff0c;数据分析和人工智能&#xff08;AI&#xff09;已经成为了现代商品计划的关键组成部分。在服装行业&#xff0c;这两项技术正在帮助企业更好地理解市场需求、优化库存管理、提高生产效率和提供更好的客户体验。本文将深入探讨数据分析和人工智能…

无约束优化问题求解(3):共轭梯度法

目录 4. 共轭梯度法4.1 共轭方向4.2 共轭梯度法4.3 共轭梯度法的程序实现4.4 非二次函数的共轭梯度法 Reference 4. 共轭梯度法 4.1 共轭方向 最速下降法的线搜索采取精确线搜索时&#xff0c;由精确线搜索需要满足的条件&#xff1a;迭代点列 x k 1 x k α k d k x_{k1}…