《实战:如何搭建一个完整的 Vue2.0 项目》- 7、Vue2.x 项目 webpack 4 升级 5(半自动升级)
1.自动升级
先全局安装升级插件
npm i npm-check npm-check-updates -g
检查依赖
npm-check
更新检查后的依赖并展示版本号,此时 package.json还没有更新
npm-check-updates

升级 package.json,下图显示更新版本,此时 package.json文件已变更。但我们是更新webpack,vue还是使用v2,先手动改回原来的版本号。
ncu -u

package.json中删除无用插件
"cache-loader": "4.1.0",
清理缓存和依赖,非常有必要,避免冗余插件,且会报奇怪的错误。或直接删除 node_modules 文件夹;
npm cache clean --force
npm install --legacy-peer-deps
删除原有 package-lock.json,安装依赖
npm install
2.解决系统启动时报错
Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin(‘preload’).use() first
解决:vue.config.js 中删除如下代码,暂无配置需要
config.plugin('preload').tap(() => [{rel: 'preload',fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],include: 'initial'}
])config.plugin('ScriptExtHtmlWebpackPlugin').after('html').use('script-ext-html-webpack-plugin', [{// `runtime` must same as runtimeChunk name. default is `runtime`inline: /runtime\..*\.js$/}]).end()
webpack < 5 used to include polyfills for node.js core modules by default.
解决:安装 npm install path-browserify,vue.config.js 中配置
module.exports = {,configureWebpack: {resolve: {fallback: { path: require.resolve("path-browserify") },}}
}
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
解决:再嵌套一层,overlay 放在 client 中
// 错误
module.exports = {devServer: {overlay: {warnings: false,errors: true},}
}
// 正确 要套在 client 属性下
module.exports = {devServer: {client: {// https://webpack.docschina.org/configuration/dev-server/#overlayoverlay:false,//禁止:当出现编译错误或警告时,在浏览器中显示全屏覆盖}}
}
export ‘default’ (imported as ‘pathToRegexp’) was not found in ‘path-to-regexp’
解决:从 v2.4.0 升级到 v6.2.1,要做如下调整。文件src\components\admin\Breadcrumb\index.vue
报错
import pathToRegexp from 'path-to-regexp'
正确
import * as pathToRegexp from 'path-to-regexp'
PostCSS Loader has been initialized using an options object that does not match the API schema
解决:再嵌套一层,plugins 放在 postcssOptions
//报错,适合 webpack 4-
css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({ // 把px单位换算成rem单位rootValue: 16, // 16px = 1remunitPrecision: 5,propList: ['*'],replace: true,mediaQuery: false,minPixelValue: 0})]}}
}
// 正确:需要再嵌套一层 postcssOptions
css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require('postcss-pxtorem')({ // 把px单位换算成rem单位rootValue: 16, // 16px = 1remunitPrecision: 5,propList: ['*'],replace: true,mediaQuery: false,minPixelValue: 0})]}}}
}
3.解决系统启动后报错
CSS 中 background: url(…) 图片路径错误
解决:貌似无法使用相对路径,要使用绝对路径。如果图片在 public/images
// 报错:暂不理解为啥 webpack5 不可行,或是有其它配置未更新
background: url('/images/tools/bg-selected.png');
// 正确
background: url('../../../../public/images/tools/bg-selected.png');
// 正确(推荐):或把图片放 src/assets/images 下。避免多层级嵌套
background: url('@/assets/images/tools/bg-selected.png');
后台管理系统
sass变量export失败
解决:文件 src\layout\components\Sidebar\index.vue 。参考 VueCLI CSS Modules,Vite 也有类似说明,参考 Vite CSS Modules
// 错误:导出对象为空
import variables from '@/styles/variables.scss'
// 正确:新增前缀.module,被认为是一个CSS模块文件,导入时会返回一个相应的模块对象
import variables from '@/styles/variables.module.scss'
相关文章:
《实战:如何搭建一个完整的 Vue2.0 项目》- 7、Vue2.x 项目 webpack 4 升级 5(半自动升级)
1.自动升级 先全局安装升级插件 npm i npm-check npm-check-updates -g检查依赖 npm-check更新检查后的依赖并展示版本号,此时 package.json还没有更新 npm-check-updates升级 package.json,下图显示更新版本,此时 package.json文件已变更…...
Python教程---Python基础语法2
1.变量和字面量(常量) 字面量就是一个一个的值,比如:1,2,3,4,5,6,‘HELLO’ 字面量所表示的意思就是它的字面的值,在程序中可以直接使用字面量 变量(variable)变量可以用来保存字面量,并且变量中保存的字面量是不定的变量本身没有任何意思,它会根据不同的字面量…...
Conda创建软件安装环境
Conda 安装软件并创建环境 Python创建虚拟环境 conda create -n env_name python3.11 进入创建的虚拟环境 conda activate env_name 安装软件 conda install -c bioconda software_name...
MySQL | MySQL 为什么不推荐使用JOIN
MySQL 为什么不推荐使用JOIN MySQL 不推荐使用 JOIN 的说法是过于简化的。实际上,在某些情况下使用 JOIN 是非常有用的,但在其他情况下可能会带来性能问题、复杂性和可维护性问题以及重复数据等问题。 首先我们需要知道JOIN语句是用于将多个表中的数据…...
[LeetCode] 1.两数之和
一、题目描述 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值 target的那两个整数,并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素不能使用两遍。 你可以按任意顺序返回答…...
ruby语言怎么写个通用爬虫程序?
Ruby语言爬虫是指使用Ruby编写的网络爬虫程序,用于自动化地从互联网上获取数据。其中,CRawler是一个基于文本的小型地牢爬虫,它被设计为可扩展,所有游戏数据均通过JSON文件提供,程序仅处理游戏引擎。除此之外ÿ…...
7 交换机与VLAN
1、拓扑结构是怎么形成的? 举例:办公楼里的每一个楼层可能会有几百台机器,显然需要N个交换机。 交换机之间连接起来,就形成一个稍微复杂的拓扑结构2、两台交换机的情形 1.两台交换机连接着三个局域网,每个局域网上都…...
C++指针笔记
一.定义 是什么? 指针就是地址,相当于门牌号。通过 0x0000也可以拿到该地址里的数据, 可是如果每创建一个变量都要去记住地址编号不太方便我们使用数据,所以才有变量。作用? 通过指针(地址)间接访问内存。内存的编号…...
vue中app.use()做了什么
为什么要app.use(参数) 注册组件,且注册的组件全局可用,或在vue原型上添加内容。 use参数需要什么类型的?vue规定:参数要么是对象形式,且必须有install这个方法属性,或者参数为函数。 另外:注…...
【网安AIGC专题11.1】论文12:理解和解释代码,GPT-3大型语言模型学生创建的代码解释比较+错误代码的解释(是否可以发现并改正)
Comparing Code Explanations Created by Students and Large Language Models 写在最前面总结思考 背景介绍编程教育—代码理解和解释技能培养编程教育—解决方案研究问题研究结果 相关工作Code ComprehensionPedagogical Benifis of code explanationLarge Language Models i…...
【GEE】4、 Google 地球引擎中的数据导入和导出
1简介 在本模块中,我们将讨论以下概念: 如何将您自己的数据集引入 GEE。如何将来自遥感数据的值与您自己的数据相关联。如何从 GEE 导出特征。 2背景 了解动物对环境的反应对于了解如何管理这些物种至关重要。虽然动物被迫做出选择以满足其基本需求&am…...
【C++】特殊类设计+类型转换+IO流
🌇个人主页:平凡的小苏 📚学习格言:命运给你一个低的起点,是想看你精彩的翻盘,而不是让你自甘堕落,脚下的路虽然难走,但我还能走,比起向阳而生,我更想尝试逆风…...
JAVA整理学习实例(一)面向对象
JAVA整理学习实例(一)面向对象 注:整理一下之前写的东西,然后在修修补补,水平有限,有错误的请指正。 前言 基础部分的面试大部份是理论和一些语法细节,如果平时没有关注,在面试或者做…...
QT 实现解密m3u8文件
文章目录 概要如何解密M3U8文件呢实现思路和代码序列图网络请求解密 结论 概要 视频文件很多已M3U8文件格式来提供,先复习下什么是M3U8文件!用QT的 mutimedia框架来播放视频时,有的视频加载慢,有的视频加载快,为啥&am…...
论文阅读—— BiFormer(cvpr2023)
论文:https://arxiv.org/abs/2303.08810 github:GitHub - rayleizhu/BiFormer: [CVPR 2023] Official code release of our paper "BiFormer: Vision Transformer with Bi-Level Routing Attention" 一、介绍 1、要解决的问题:t…...
理解 fopen的 rwa r+w+a+ 参数含义
tags: C categories: C 理解 一图胜千言 我愿称之为最强 c - Difference between r and w in fopen() - Stack Overflow; 需要注意里面的a和 a, 区别在于 a 不可以读而 a可以读. c - Difference between r and w in fopen() - Stack Overflow; ModeReadWriteCreate New Fil…...
【强化学习】17 ——DDPG(Deep Deterministic Policy Gradient)
文章目录 前言DDPG特点 随机策略与确定性策略DDPG:深度确定性策略梯度伪代码代码实践 前言 之前的章节介绍了基于策略梯度的算法 REINFORCE、Actor-Critic 以及两个改进算法——TRPO 和 PPO。这类算法有一个共同的特点:它们都是在线策略算法,…...
驱动开发11-2 编写SPI驱动程序-点亮数码管
驱动程序 #include <linux/init.h> #include <linux/module.h> #include <linux/spi/spi.h>int m74hc595_probe(struct spi_device *spi) {printk("%s:%d\n",__FILE__,__LINE__);char buf[]{0XF,0X6D};spi_write(spi,buf,sizeof(buf));return 0; …...
Java使用pdfbox进行pdf和图片之间的转换
简介 pdfbox是Apache开源的一个项目,支持pdf文档操作功能。 官网地址: Apache PDFBox | A Java PDF Library 支持的功能如下图.引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox-app</artifactId><version>…...
机器学习中的关键组件
机器学习中的关键组件 数据 每个数据集由一个个样本组成,大多时候,它们遵循独立同分布。样本有时也叫作数据点或数据实例,通常每个样本由一组称为特征或协变量的属性组成。机器学习会根据这些属性进行预测,预测得到的称为标签或…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
