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

node从14升级到22，vue2项目调整内容

news 来源：原创 2025/6/14 23:43:33

下载新版本node之后，运行vue2项目会报如下错误：

因为 node.js V17版本中发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响。故此以前的项目在升级 nodejs 版本后会报错。

那么可以在package.json中加入（注意：&&后面是你的项目的启动工具，根据不同框架更改启动工具）：

"scripts": {
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
  },

重新运行之后会提示不支持node-sass

这个错误是由于 node-sass 模块不兼容当前 Node.js 版本（v22.14.0）导致的。node-sass 已官方宣布弃用，建议迁移到 sass（Dart Sass）。以下是具体解决方案：

替换 `node-sass` 为 `sass`（推荐）

直接改用官方推荐的 sass 包，语法完全兼容且支持新版 Node.js：

# 卸载 node-sass
npm uninstall node-sass

# 安装 sass（Dart Sass）
npm install sass --save-dev

替换完成之后，发现又报错了

解决方法：（Dart Sass已经弃用了/deep/选择器）使用 ::v-deep 替代 /deep/，直接修改代码：

// 修改前（废弃写法）
/deep/ .el-dialog__body {
  padding: 20px;
}

// 修改后（标准写法）
::v-deep .el-dialog__body {
  padding: 20px;
}

另外需要注意：确保穿透选择器 仅作用于子组件，不要嵌套在普通样式中：

// ❌ 错误写法（嵌套在普通样式中）
.parent-class {
  ::v-deep .el-dialog__body {
    padding: 20px;
  }
}

// ✅ 正确写法（直接穿透）
::v-deep .el-dialog__body {
  padding: 20px;
}

至此，升级已完成，如果还有其他报错，可继续进行修改，直到项目运行起来