《实战:如何搭建一个完整的 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-browserifyvue.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'

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

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

相关文章

FFmpeg——使用Canvas录制视频尚存问题的解决方案

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

编译正点原子LINUXB报错make: arm-linux-gnueabihf-gcc:命令未找到

编译正点原子LINUX报错make: arm-linux-gnueabihf-gcc&#xff1a;命令未找到 1.报错内容2.解决办法3./bin/sh: 1: lzop: not found4.编译成功 1.报错内容 make: arm-linux-gnueabihf-gcc&#xff1a;命令未找到CHK include/config/kernel.releaseCHK include/generat…

Linux 上的轻量级浏览器

导读大多数 Linux 桌面环境中包含的基本图像查看器可能不足以满足你的需要。如果你想要一些更多的功能&#xff0c;但仍然希望它是轻量级的&#xff0c;那么看看这四个 Linux 桌面中的图像查看器&#xff0c;如果还不能满足你的需要&#xff0c;还有额外的选择。 当你需要的不…

本地部署Jellyfin影音服务器并实现远程访问影音库

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…

表格冻结第二行

在网上找了一圈也没找到说明白的。 像这样的表格下面会有很多行&#xff0c;往下翻的时候会忘记第二行显示的什么内容。 需求&#xff1a;将第二行进行冻结 实现&#xff1a; 1&#xff0c;选中第一和第二行&#xff0c;下拉&#xff0c;点击冻结 2&#xff0c;会显示冻结至…

会声会影2024出来了吗?会声会影2024这款视频剪辑软件怎么样?

众所周知&#xff0c;每每有新兴行业逐渐崛起壮大的时候&#xff0c;随机而来的就是这个行业创造出的衍生行业&#xff0c;比如说现在的短视频平台或者是视频剪辑行业&#xff0c;都是很明显例子&#xff0c;今天我们就针对剪辑软件来和大家聊一聊&#xff0c;会声会影2024这款…

自动化测试篇:Java+selenium+appium自动化测试详解

一、启动测试机或者Android模拟器&#xff08;Genymotion俗称世界上最快的模拟器&#xff0c;可自行百度安装&#xff09; 同时&#xff0c;我也准备了一份软件测试视频教程&#xff08;含接口、自动化、性能等&#xff09;&#xff0c;需要的可以直接在下方观看&#xff0c;或…

MASK-RCNN tensorflow环境搭建

此教程默认你已经安装了Anaconda&#xff0c;且tensorflow 为cpu版本。为什么不用gpu版本&#xff0c;原因下面解释。 此教程默认你已经安装了Anaconda。 因为tensorflow2.1后的gpu版&#xff0c;不支持windows。并且只有高版本的tensorflow才对应我的CUDA12.2&#xff1b; 而…

【漏洞复现】fastjson_1.2.24_unserializer_rce

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞检测3、漏洞验证 1.5、深度利用1、GetShell 说明内容漏洞编号漏洞名称fastjson 1.2.24 反序列化导致…

自定义在input生成tag标签样式,标签可删除。组件封装

生成效果如图&#xff1a; <template><div class"tag-input"><!-- 父盒子 --><div class"father_box" click"fatherOnclick" :class"verify?:notVerify"><!-- 生成的标签 --><div v-for"(item…

师从IEEE Fellow|民办高校计算机专业教师自费赴美访学

D老师科研背景较弱&#xff0c;拟自费访学并带孩子出国就读&#xff0c;故要求申请到美国生活成本低且有较好公立中学教育资源的地区&#xff0c;并希望对方不收管理费。最终我们落实了德克萨斯大学达拉斯分校的邀请函&#xff0c;对方是IEEE Fellow、IET Fellow和EAI Fellow三…

Redis中Hash类型的命令

目录 哈希类型的命令 hset hget hexists hdel hkeys hvals hgetall hmget hlen hsetnx hincrby hincrbyfloat 内部编码 Hash类型的应用场景 作为缓存 哈希类型和关系型数据库的两点不同之处 缓存方式对比 Redis自身已经是键值对的结构了,Redis自身的键值对就…

YOLO算法改进5【中阶改进篇】:添加SENet注意力机制

SE-Net 是 ImageNet 2017&#xff08;ImageNet 收官赛&#xff09;的冠军模型&#xff0c;是由WMW团队发布。具有复杂度低&#xff0c;参数少和计算量小的优点。且SENet 思路很简单&#xff0c;很容易扩展到已有网络结构如 Inception 和 ResNet 中。 我们可以看到&#xff0c;已…

java配置GDAL

<gdal.version>3.7.0</gdal.version><!-- gdal--><dependency><groupId>org.gdal</groupId><artifactId>gdal</artifactId><version>${gdal.version}</version></dependency> GDAL环境安装 downlo…

PHP进销存ERP系统源码

PHP进销存ERP系统源码 系统介绍&#xff1a; 扫描入库库存预警仓库管理商品管理供应商管理。 1、电脑端手机端&#xff0c;手机实时共享&#xff0c;手机端一目了然。 2、多商户Saas营销版 无限开商户&#xff0c;用户前端自行注册&#xff0c;后台管理员审核开通 3、管理…

HarmonyOS鸿蒙原生应用开发设计- 元服务(原子化服务)图标

HarmonyOS设计文档中&#xff0c;为大家提供了独特的元服务图标&#xff0c;开发者可以根据需要直接引用。 开发者直接使用官方提供的元服务图标内容&#xff0c;既可以符合HarmonyOS原生应用的开发上架运营规范&#xff0c;又可以防止使用别人的元服务图标侵权意外情况等&…

ROS学习笔记(4):ROS架构和通讯机制

前提 前4篇文章以及帮助大家快速入门ROS了&#xff0c;而从第5篇开始我们会更加注重知识积累。同时我强烈建议配合B站大学的视频一起服用。 1.ROS架构三层次&#xff1a; 1.基于Linux系统的OS层&#xff1b; 2.实现ROS核心通信机制以及众多机器人开发库的中间层&#xff1b…

提升ChatGPT答案质量和准确性的方法Prompt engineering

文章目录 怎么获得优质的答案设计一个优质prompt的步骤:Prompt公式:示例怎么获得优质的答案 影响模型回答精确度的因素 我们应该知道一个好的提示词,要具备一下要点: 清晰简洁,不要有歧义; 有明确的任务/问题,任务如果太复杂,需要拆分成子任务分步完成; 确保prompt中…

ElasticSearch集群环境搭建

1、准备三台服务器 这里准备三台服务器如下: IP地址主机名节点名192.168.225.65linux1node-1192.168.225.66linux2node-2192.168.225.67linux3node-3 2、准备elasticsearch安装环境 (1)编辑/etc/hosts&#xff08;三台服务器都执行&#xff09; vim /etc/hosts 添加如下内…

硬盘坏道检测修复工具下载,仅支持机械盘

硬盘坏道检测修复工具下载&#xff0c;仅支持机械盘 下载路径&#xff0c;最下方官网——软件下载——常用工具下载——硬盘坏道修复工具硬盘检测修复工具 【软件试用版下载、软件资讯或技术支持服务可点击文章最下方官网】