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

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

news 2025/11/6 23:53:50

老项目简介

技术框架

  • 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

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/11/4 3:16:59

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/11/1 7:16:32

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/10/25 18:03:18

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2025/10/26 21:21:16

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/10/31 21:11:39

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/11/1 5:38:42

聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

编程新知 2025/11/2 22:27:24