vue2 项目webpack 4升5
项目背景
公司项目需要将进行微前端改造.主应用和子应用会需要共享依赖,考虑使用模块联邦进行依赖共享.
由于模块联邦要升级到webpack 5
才能用,所以老项目要从webpack 4
升级到webpack 5
实现思路
原来的项目用的是vue-cli 3
,查了一下可以vue-cli 5
用的就是webpack 5
,所以可以直接将vue-cli3 ->5
就可以了
具体实现
参考vue-cli
的文档Migrate from v4
npm update-g @vue/cli
- 将所有带有@vue/cli-的全部升级到最新
disableHostCheck
改成allowedHosts: 'all'
遇到的问题
webpack4->5
有很多破坏性升级 从 v4 升级到 v5 | webpack 中文文档
cannot resolve corejs
->core-js
找不到,需要下载并显式指定
npm i corejs
(下2下3都行,我下的是3)
需要在vue.config.js
中显式指定
presets: [['@vue/app',//显式指定core-js版本{'useBuiltIns': 'usage','corejs': '3.39.0'//指定用的corejs版本}]],
-
默认不再包含
Node.js
核心模块的polyfills
需要重新安装
2.1. path需要安装
2.2.process.env
需要安装插件DefinePlugin
或EnvironmentPlugin
(但是vue-cli
本身就是用的这两个注入环境变量的 -
script-ext-html-webpack-plugin
不再适配webpack 5
,需要去掉 -
css
失效->sass
,sass-loader
升级
4.1.sass-loader
:^7.1.0
->^12.0.0
4.2.sass
:1.26.10
->^1.26.10
-
>>>
样式穿透失效需改用::v-deep
5.1.>>>
深度选择器不是标准的css
选择器,vue-loader 15
以上已经弃用,vue-cli 5
用的17+的vue-loader
就不支持了
Migrating from v14 | Vue Loader
5.2.>>>
和sass的语法冲突,sass 解析器可能会将其误解为多个连续的>
操作符,多个连续的>
操作符在sass和css中都没有意义
参考链接:
https://p2yang.github.io/blog/upgrade-webpack5
https://blog.csdn.net/Note_creek/article/details/129714938
https://juejin.cn/post/7083146700939853832
https://blog.csdn.net/sinat_31213021/article/details/134195881
https://blog.csdn.net/m0_37937502/article/details/124986762
相关文章:
vue2 项目webpack 4升5
项目背景 公司项目需要将进行微前端改造.主应用和子应用会需要共享依赖,考虑使用模块联邦进行依赖共享. 由于模块联邦要升级到webpack 5才能用,所以老项目要从webpack 4升级到webpack 5 实现思路 原来的项目用的是vue-cli 3,查了一下可以vue-cli 5用的就是webpack 5,所以可以…...
前端开发性能监控中的数据采集与性能调优方法
🌟 前端开发性能监控中的数据采集与性能调优方法 📖 前言 在现代 Web 应用中,性能是用户体验的关键因素之一。性能问题不仅会影响用户满意度,还可能导致业务损失。如何高效地监控前端性能并进行性能调优,成为每个开发…...

S32K324 Stack异常分析及解决方案
文章目录 前言正向排查尝试反向排查问题原因分析问题解决处理总结前言 在项目开发过程中,在一次软件变更时,调整了task优先级之后导致应用层软件中的float数据经常性的变为NAN,导致应用层功能失效。本文记录下这个bug的分析及解决过程。 正向排查尝试 由于问题复现的概率…...
[创业之路-202]:任正非管理华为的思想与毛泽东管理党、军队、国家的思想的相似性与差异性
目录 一、相似性 1、指导思想 2、管理策略 3、危机意识与自我否定 4、理想主义与奋斗精神 二、差异性 1、哲学基础与思想倾向 2、管理方法与策略 3、组织文化与价值观 一、相似性 任正非管理华为的思想与毛泽东管理党、军队、国家的思想在多个方面存在相似性。 以下…...

SAP PP ECN CSAP_MAT_BOM_MAINTAIN
刚开始的时候ECN总是加不上, 参考kimi给出的案例 点击链接查看和 Kimi 智能助手的对话 https://kimi.moonshot.cn/share/cth1ipmqvl7f04qkggdg 效果 加上了 FUNCTION ZPBOM_PLM2SAP. *"------------------------------------------------------------------…...

html中实用标签dl dt dd(有些小众的标签 但是很好用)
背景描述 html <dl> <dt> <dd>是一组合标签,他们与ol li、ul li标签很相似 但是他却是没有默认前缀并且有缩进的标签 使用方式与table表格的标签一致 使用方式 dt和dd是放于dl标签内,dt与dd处于dl下相同级。就是dt不能放入dd内&am…...

ONES 功能上新|ONES Copilot、ONES Wiki 新功能一览
ONES Copilot 可基于工作项的标题、描述、属性信息,对工作项产生的动态和评论生成总结。 针对不同类型的工作项,总结输出的内容有对应的侧重点。 应用场景: 在一些流程步骤复杂、上下游参与成员角色丰富的场景中,工作项动态往往会…...

实现Python将csv数据导入到Neo4j
目录 一、获取数据集 1.1 获取数据集 1.2 以“记事本”方式打开文件 1.3 另存为“UTF-8”格式文件 1.4 选择“是” 二、 打开Neo4j并运行 2.1 创建新的Neo4j数据库 2.2 分别设置数据库名和密码 编辑 2.3 启动Neo4j数据库 2.4 打开Neo4j数据库 2.5 运行查看该数据库…...
QML Rectangle组件
文章目录 前言主体**简单的矩形****渐变的矩形****带边框的矩形****圆角矩形****圆形 & 圆环** 总结 前言 在 QML 中,Rectangle 是一个常见且非常实用的元素,它允许开发者轻松创建矩形形状的图形。通过调整 Rectangle 的多种属性,我们不…...

uniapp开发app,cover-view不能隐藏,使用v-if,v-show都不行的解决办法
先上解决方案 在最后多写一个v-else <cover-view class"point-info" v-if"selectedPoint"><cover-view class"info-content"><cover-view class"info-item">。。。</cover-view><cover-view class"i…...

用adb命令给APP做压力测试,有什么不同?
压力测试 app做压力测试目的是模拟用户在使用软件时随意向软件发出指令,例如操作app的点击,滑动,返回等一系列随机事件,来检测app的承受能力 第一步:手机安装包需要待测的app 第二步:输入adb start-ser…...

netcore 集成Prometheus
一、安装包 <ItemGroup><PackageReference Include"prometheus-net" Version"8.2.1" /><PackageReference Include"prometheus-net.AspNetCore" Version"8.2.1" /> </ItemGroup> 二、添加代码 #region Pro…...

同城外卖系统源码扩展指南:搭建海外外卖APP平台详解
本篇文章,笔者将探讨如何基于同城外卖系统源码,搭建适合不同国家的海外外卖APP平台,涵盖多语言支持、支付接口对接、本地化适配等方面的实践经验和技术要点。 一、确定目标市场与用户需求 在开发海外外卖APP平台之前,首先需要深…...
JavaScript 中常见内置对象的知识点及示例总结
一、String(字符串)对象 知识点: 用于处理文本数据,它有许多内置的属性和方法来操作字符串,比如获取字符串长度、提取子字符串、替换字符等。字符串在 JavaScript 中是不可变的,即一旦创建,就不…...
CSSmodule的作用是什么
CSS Modules的作用主要体现在以下几个方面: 1. 解决全局样式污染问题 在传统的CSS管理方式中,样式定义通常是全局的,这很容易导致全局样式污染。当多个组件或页面共享同一个样式时,可能会出现样式冲突和覆盖的情况,从…...
python\shell\c++语法对比
语法区别举例: itempythonshellc变量定义a 10a10int a 10数组定义arr[1, add, 3]arr(1 a hello) declare -A arr([a]1 [b]2)int arr[] {1, 2, 3}if条件判断 if xxx: xxx elif xxx: xxx else: xxx if [ expressions ];then xxx e…...
优先队列【东北大学oj数据结构9-3】C++
优先队列 优先级队列是一种数据结构,其中保存了一组数据 S,其中每个元素都有一个键,并执行以下操作: insert(S, k):将元素k插入集合S extractMax(S):从S中取出S中key最大的元素并返回其值 创建一个程序&am…...

圣诞快乐(h5 css js(圣诞树))
一,整体设计思路 圣诞树h5(简易) 1.页面布局与样式: 页面使用了全屏的黑色背景,中央显示圣诞树,树形由三层绿色的三角形组成,每一层的大小逐渐变小。树干是一个棕色的矩形,位于三角…...

基于MATLAB的图像增强
目录 一、背景及意义介绍背景图像采集过程中的局限性 意义 二、概述三、代码结构及说明(一)整体结构(二)亮度增强部分(三)对比度增强部分(四)锐度增强部分 四、复现步骤(…...

大数据之Hbase环境安装
Hbase软件版本下载地址: http://mirror.bit.edu.cn/apache/hbase/ 1. 集群环境 Master 172.16.11.97 Slave1 172.16.11.98 Slave2 172.16.11.99 2. 下载软件包 #Master wget http://archive.apache.org/dist/hbase/0.98.24/hbase-0.98.24-hadoop1-bin.tar.gz…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...

简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...

网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...