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

webpack 老项目升级记录：node-sass 规定的 node v8 提升至支持 node v22

news 2025/12/22 6:22:14

老项目简介

技术框架

  • vue 2.5.17
  • webpack 4.16.5
  • "webpack-cli": "3.1.0"
  • "node-sass": "^4.7.2"

几个阶段

第一步：vue2 升级到最新

第一步：升级 vue2 至最新版本，截止到目前（2024-10-21），最高的 vue 版本是 "vue": "^2.7.16"

这一步会比较丝滑，2版本兼容的挺好的

第二步：寻找项目只能在 Node 低版本下运行的原因

什么叫版本只能在低版本运行的原因呢：举个例子，比方说我的项目必须用 Node 8 版本启动，其他版本就不行

第二步：寻找 node 版本锁死的原因：node-sass！！！

这个依赖包版本是跟 node 版本强绑定的 ，具体可以看一下这个

在这里插入图片描述

所以我改成了 sass ，也叫 dart-sass

在这里插入图片描述
这一步需要修改源码了！

因为 sass 只支持 ::v-deep，而 node-sass 同时支持/deep/ 和 ::v-deep

所以，可以全局搜索 /deep/ 为::v-deep，这一步可能会改很多的文件！记得修改完之后跑一下试试！

在这里插入图片描述

此时，我们的 node 版本大概可以支持到 node V16，这个的限制是因为 webpack4了

根据 Webpack 4 的官方文档和社区反馈，Webpack 4 支持的最高 Node.js 版本是 14.x。
建议使用 Node.js 14.x 版本以获得最佳的兼容性和性能。

替换 webpack 为 vite

这一步的工程量也是挺大的，大概有如下几点

  • 安装 vite

    npm install –save vite

  • 安装你项目语言的插件(例如vue2，vue3，react 等)，我的是 vue2

    npm install –save @vitejs/plugin-vue2
import vue2 from "@vitejs/plugin-vue2";

  • 修改 package.json 里的命令

    {"scripts": {"dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`"build": "vite build", // 为生产环境构建产物"preview": "vite preview" // 本地预览生产构建产物}
}

  • 项目根目录下，新建一个 vite.config.ts

    // vite.config.js
import { defineConfig } from 'vite'
import vue2 from "@vitejs/plugin-vue2";
export default defineConfig({plugins: [vue2(),],
})

  • 还要新建一个 .env 的文件，用于存放 process 的变量，这里的变量我是在 axios 拦截器里用的在这里插入图片描述

    VITE_BASE_URL= "后端地址"

  • 还要改一下项目根目录的 index.html 的入口文件，具体参考这个官方文档

    <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>wukong</title><link rel="icon" href="/favicon.ico">
</head>
<body><div id="app"></div><script type="module" src="/src/main.js"></script>
</body>
</html>

  • vite 运行之后会报错，是因为一些组件在引入的时候没有写 .vue，添加 extensions 到 vite.config 里
    在这里插入图片描述

    resolve: {alias: {"@": path.resolve(__dirname, "src"),},extensions: [".js", ".json", ".ts", ".jsx", ".tsx", ".vue"], // 添加 .vue 扩展名},

  • … 大概就是这么多，肯定会遇到其他问题的，根据自己的项目改就好

切换完 vite 之后，node版本就可以切得高一点来试试了，我的是 v22.9.0
在这里插入图片描述

sass 终端提示报错（未解决）（we

这个原因是 sass 的问题，虽然给了配置字段，但是不好使，看着闹心的话暂时没啥办法，容我再研究研究

1. https://sass-lang.com/blog/import-is-deprecated/#built-in-functions
2. https://stackoverflow.com/questions/78997907/the-legacy-js-api-is-deprecated-and-will-be-removed-in-dart-sass-2-0-0

在这里插入图片描述

相关文章：

webpack 老项目升级记录：node-sass 规定的 node v8 提升至支持 node v22

老项目简介 技术框架 vue 2.5.17webpack 4.16.5"webpack-cli": "3.1.0""node-sass": "^4.7.2" 几个阶段 第一步&#xff1a;vue2 升级到最新 第一步&#xff1a;升级 vue2 至最新版本&#xff0c;截止到目前&#xff08;2024-10-…...

编程日记 2024/10/22 4:10:35

【wpf】08 xml文件的存取操作

在使用wpf编程过程中&#xff0c;会用到xml的配置文件&#xff0c;实现对其读取和存储的操作是必须的。 1 xml说明 可扩展标记语言 (Extensible Markup Language, XML) &#xff0c;标准通用标记语言的子集&#xff0c;可以用来标记数据、定义数据类型&#xff0c;是一种允许…...

编程日记 2024/10/22 4:08:32

即时通讯代码优化

在线用户逻辑修复 在进行测试时&#xff0c;发现当前代码有个问题&#xff0c;如果test1在服务器进行连接&#xff0c;本地的test2给test1发消息&#xff0c;虽然test1能收到服务器上的信息&#xff0c;但是本地服务日志中会报teset1不在线&#xff0c;需要对该种情况进行修复…...

编程日记 2024/10/22 4:05:28

jmeter学习（8）界面的使用

1、新建test plan 3、 打开文件 4、保存 5、剪切 6、复制 7、粘贴 8、所有线程组展开 9、所有线程组收缩 10、置灰&#xff0c;操作后无法使用 11、执行 13、清空当前线程组结果 14、清空所有线程组结果 15、函数助手 搜索&#xff0c;可以用于搜索某个请求&#x…...

编程日记 2024/10/22 4:03:26

记录一次hiveserver2卡死(假死)问题

问题描述 给开发人员开通了个账号&#xff0c;连接hive进行查询&#xff0c;后来发现&#xff0c;hive服务有时候会卡死&#xff0c;查询不了&#xff0c;连不上&#xff08;所有账号/客户端都连不上hive&#xff09;&#xff0c;但在chd里面看监控&#xff0c;服务器资源状态…...

编程日记 2024/10/22 4:02:24

【ios】在 SwiftUI 中实现可随时调用的加载框

在 SwiftUI 项目中实现一个自定义的加载框&#xff08;loading&#xff09;功能&#xff0c;可以在任意位置调用&#xff0c;以便显示加载动画或者进度条。下面的教程将详细讲解如何创建一个可复用的 Loading 组件&#xff0c;并通过通知机制控制其显示和隐藏。 先上效果&…...

编程日记 2024/10/22 4:01:24

字符、解释型语言、编程语言的互操作、输出

字符 同样是1&#xff0c;有人看到的是数字&#xff0c;有人看到的是字符&#xff0c;还有人看到的是一个小目标。 不同语言的字符 正则表达式把字符分成普通字符和元字符&#xff0c;元字符为了搭配匹配。比如.代表任意非换行字符&#xff0c;这对于通配很简便&#xff0c;用\…...

编程日记 2024/10/22 4:00:22

基于Python的自然语言处理系列（39）：Huggingface中的解码策略

在自然语言生成任务中&#xff0c;如何选择下一步的单词或者词语对生成的文本质量影响巨大。Huggingface 提供了多种解码策略&#xff0c;可以在不同的场景下平衡流畅度、创造力以及生成效率。在这篇文章中&#xff0c;我们将逐步介绍 Huggingface 中的几种常见解码策略&#x…...

编程日记 2024/10/22 3:58:20

如何将视频格式转为mp4？好好看看下面这几个方法

如何将视频格式转为mp4&#xff1f;在数字化时代&#xff0c;视频已成为信息传播与娱乐消遣的重要载体。无论是学习、工作还是日常生活&#xff0c;我们几乎每天都会接触到各式各样的视频内容。然而&#xff0c;不同设备、平台或软件生成的视频文件往往采用不同的编码格式&…...

编程日记 2024/10/22 3:55:18

景区智慧公厕系统，监测公厕异味，自动清洁除臭

随着旅游业的快速发展&#xff0c;景区的公共厕所管理成为提升游客体验的重要环节。传统的公厕管理方式存在诸多不足&#xff0c;如卫生条件差、异味严重等问题。为了改善这些问题&#xff0c;许多景区开始采用智慧公厕系统。这种系统能够实时监测公厕内的异味&#xff0c;并自…...

编程日记 2024/10/22 3:54:17

GitLab CVE-2024-6389、CVE-2024-4472 漏洞解决方案

极狐GitLab 近日发布安全补丁版本17.3.2, 17.2.5, 17.1.7&#xff0c;修复了17个安全漏洞&#xff0c;本分分享其中两个漏洞 CVE-2024-6389、CVE-2024-4472 两个漏洞详情及解决方案。 极狐GitLab 正式推出面向 GitLab 老旧版本免费用户的专业升级服务&#xff0c;为 GitLab 老…...

编程日记 2024/10/22 3:53:16

hashCode的底层原理

HashCode是计算机科学中一个广泛使用的概念&#xff0c;特别是在Java等编程语言中&#xff0c;它扮演着重要的角色。为了详细解释hashCode的底层原理&#xff0c;以下从几个方面进行阐述&#xff1a; 一、hashCode的基本概念 HashCode&#xff0c;即哈希码&#xff0c;是一个将…...

编程日记 2024/10/22 3:52:15

hadoop_hdfs详解

HDFS秒懂 HDFS定义HDFS优缺点优点缺点 HDFS组成架构NameNodeDataNodeSecondary NameNodeClient NameNode工作机制元数据的存储启动流程工作流程 Secondary NameNode工作机制checkpoint工作流程 DataNode工作机制工作流程数据完整性 文件块大小块太小的缺点块太大的缺点 文件写入…...

编程日记 2024/10/22 3:51:14

【Linux】Linux命令行与环境变量

1.命令行 前⾯写C语⾔时&#xff0c;很少关注过 main 函数的参数&#xff0c;也没有考虑过 main 为什么会有参 数。 实际上在C语⾔中&#xff0c; main 函数⼀共有三个参数&#xff0c;在命令⾏部分先关注前两个参数&#xff1a; 1. argc&#xff1a;表示 main 函数接收到参…...

编程日记 2024/10/22 3:50:12

改变函数调用上下文：apply与call方法详解及实例

目录 改变函数调用上下文&#xff1a;apply与call方法详解及实例 一、什么是 apply 方法&#xff1f; 1、apply 语法 2、apply 示例 二、什么是 call 方法&#xff1f; 1、call 语法 2、call 示例 三、apply 和 call 的共同与差异 1、apply 和 call 的共同点 2、apply…...

编程日记 2024/10/22 3:49:11

k8s中的微服务

一、什么是微服务 用控制器来完成集群的工作负载&#xff0c;那么应用如何暴漏出去&#xff1f;需要通过微服务暴漏出去后才能被访问 Service是一组提供相同服务的Pod对外开放的接口。 借助Service&#xff0c;应用可以实现服务发现和负载均衡。 service默认只支持4层负载均…...

编程日记 2024/10/22 3:45:06

树莓派--AI视觉小车智能机器人--1.树莓派系统烧入及WiFi设置并进入jupyterlab

一、Raspberry Pi 系统烧入 使用树莓派&#xff0c;我们是需要有操作系统的。默认情况下&#xff0c;树莓派会在插入的SD卡上查找操作系统。这需要一台电脑将存储设备映像为引导设备&#xff0c;并将存储设备插入该电脑。大多数树莓派用户选择microSD卡作为引导设备。 1.1 下载…...

编程日记 2024/10/22 3:44:05

MacOS安装BurpSuite

文章目录 一、下载地址二、下载注册机三、安装教程四、启动burpsuit五、免责声明 一、下载地址 https://portswigger-cdn.net/burp/releases/download?productpro&version2024.7.1&typeMacOsx二、下载注册机 https://github.com/NepoloHebo/BurpSuite-BurpLoaderKey…...

编程日记 2024/10/22 3:41:02

【AI工具大全】《史上最全的AI工具合集》

一.AI编程类工具 1.CodeArts Snap CodeArts Snap是华为云研发的智能开发助手，覆盖软件开发全生命周期，提供代码生成、研发知识问答、智能协同等功能。通过自然语言编程，它能自动生成代码、解释代码逻辑、提供调试与检查，提升开发效率和软件质量。 2.ModelArts ModelArt…...

编程日记 2024/10/22 3:39:00

qt继承结构

一、 继承结构 所有的窗口类均继承自QWidget类&#xff0c;因此QWidget类本身包含窗口的特性。QWidget对象本身既可以作为独立窗口&#xff0c;又可以作为组件&#xff08;子窗口&#xff09;。 通过构造函数可以创建以上两种形态的QWidget&#xff1a; // 参数1&#xff1a;使…...

编程日记 2024/10/22 3:34:55

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/12/14 17:38:17

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/11/30 16:55:15

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/12/19 3:18:28

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/12/17 0:31:52

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/12/13 5:39:02

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2025/12/5 2:20:35

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

编程新知 2025/10/14 22:57:53