当前位置: 首页 > news >正文

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

  1. npm update-g @vue/cli
  2. 将所有带有@vue/cli-的全部升级到最新
  3. disableHostCheck 改成allowedHosts: 'all'

遇到的问题

webpack4->5有很多破坏性升级 从 v4 升级到 v5 | webpack 中文文档

  1. 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版本}]],
  1. 默认不再包含Node.js核心模块的polyfills 需要重新安装
    2.1. path需要安装
    2.2. process.env需要安装插件DefinePluginEnvironmentPlugin(但是vue-cli本身就是用的这两个注入环境变量的

  2. script-ext-html-webpack-plugin不再适配webpack 5,需要去掉

  3. css失效->sass,sass-loader 升级
    4.1. sass-loader:^7.1.0->^12.0.0
    4.2.sass:1.26.10->^1.26.10

  4. >>>样式穿透失效需改用::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>是一组合标签&#xff0c;他们与ol li、ul li标签很相似 但是他却是没有默认前缀并且有缩进的标签 使用方式与table表格的标签一致 使用方式 dt和dd是放于dl标签内&#xff0c;dt与dd处于dl下相同级。就是dt不能放入dd内&am…...

ONES 功能上新|ONES Copilot、ONES Wiki 新功能一览

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

实现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 中&#xff0c;Rectangle 是一个常见且非常实用的元素&#xff0c;它允许开发者轻松创建矩形形状的图形。通过调整 Rectangle 的多种属性&#xff0c;我们不…...

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做压力测试目的是模拟用户在使用软件时随意向软件发出指令&#xff0c;例如操作app的点击&#xff0c;滑动&#xff0c;返回等一系列随机事件&#xff0c;来检测app的承受能力 第一步&#xff1a;手机安装包需要待测的app 第二步&#xff1a;输入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平台详解

本篇文章&#xff0c;笔者将探讨如何基于同城外卖系统源码&#xff0c;搭建适合不同国家的海外外卖APP平台&#xff0c;涵盖多语言支持、支付接口对接、本地化适配等方面的实践经验和技术要点。 一、确定目标市场与用户需求 在开发海外外卖APP平台之前&#xff0c;首先需要深…...

JavaScript 中常见内置对象的知识点及示例总结

一、String&#xff08;字符串&#xff09;对象 知识点&#xff1a; 用于处理文本数据&#xff0c;它有许多内置的属性和方法来操作字符串&#xff0c;比如获取字符串长度、提取子字符串、替换字符等。字符串在 JavaScript 中是不可变的&#xff0c;即一旦创建&#xff0c;就不…...

CSSmodule的作用是什么

CSS Modules的作用主要体现在以下几个方面&#xff1a; 1. 解决全局样式污染问题 在传统的CSS管理方式中&#xff0c;样式定义通常是全局的&#xff0c;这很容易导致全局样式污染。当多个组件或页面共享同一个样式时&#xff0c;可能会出现样式冲突和覆盖的情况&#xff0c;从…...

python\shell\c++语法对比

语法区别举例&#xff1a; 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++

优先队列 优先级队列是一种数据结构&#xff0c;其中保存了一组数据 S&#xff0c;其中每个元素都有一个键&#xff0c;并执行以下操作&#xff1a; insert(S, k)&#xff1a;将元素k插入集合S extractMax(S)&#xff1a;从S中取出S中key最大的元素并返回其值 创建一个程序&am…...

圣诞快乐(h5 css js(圣诞树))

一&#xff0c;整体设计思路 圣诞树h5&#xff08;简易&#xff09; 1.页面布局与样式&#xff1a; 页面使用了全屏的黑色背景&#xff0c;中央显示圣诞树&#xff0c;树形由三层绿色的三角形组成&#xff0c;每一层的大小逐渐变小。树干是一个棕色的矩形&#xff0c;位于三角…...

基于MATLAB的图像增强

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

大数据之Hbase环境安装

Hbase软件版本下载地址&#xff1a; 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…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...