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

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

news 2025/7/8 13:11:38

老项目简介

技术框架

  • 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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/7/8 12:02:22

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/7/7 5:55:02

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/7/5 0:21:39

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/6/16 12:40:21

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/6/21 3:16:21

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/6/21 9:02:37

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/7/7 22:43:00

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/7/8 10:47:21

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/6/19 4:13:08

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2025/7/7 19:29:36