淘先锋技术网

首页 1 2 3 4 5 6 7

问题

项目npm run serve时报错:
在这里插入图片描述
如果你遇到了这个问题,那你一定是使用了 OpenSSL v3 的 Node.js 版本。(node版本过高)

解决

安全最重要(推荐)

👍这个问题是由 Node.js 的更新导致的,而更新的目的是为了修复高风险漏洞,对于重视安全的开发者来说,这个方案是 首 选 的 。

不少的前端项目都会使用到 webpack,如果你在使用 webpack 时遇到了这个问题,请尝试以下方案解决:

webpack v4

向 webpack 传递参数 output.hashFunction = ‘sha512’ 或 output.hashFunction = ‘sha256’,这将取决于你系统中 Node.js 支持哪些 Hash 算法。

webpack 官方文档给出的示例[2]类似于下面这样:

module.exports = {
  //...
  output: {
    hashFunction: 'sha512',
  },
};

再举个 Vue.js 的例子,编辑 vue.config.js(在项目根目录下,如不存在请创建):

module.exports = {
    //...
    configureWebpack: {
        output: { hashFunction: 'sha512' },
    },
};
webpack v5.54.0+

从 webpack v5.54.0+ 开始,hashFunction 支持 xxhash64 作为一种更快的算法,当 experiments.futureDefaults 被启用时,它将被作为默认算法使用。

如果你的 webpack 版本低于 v5.54.0,请按上方 webpack v4 的步骤操作。

如果你满足 webpack v5.54.0+ 的条件,参照上方 webpack v4 的方法,将 sha512 或 sha256 替换为 xxhash64 即可。

能跑起来就行

⚠️注意:这可能导致你使用的 OpenSSL 存在漏洞,导致安全问题,只能浅浅使用!

临时环境变量大法(通用)

这个解决办法是 通用 的!这意味着无论你是否编写的是前端项目,都可以使用这个方法,这将对 Node.js 直接生效。

运行代码前,在终端内添加环境变量 NODE_OPTIONS=–openssl-legacy-provider

macOS 和 Linux

export NODE_OPTIONS=--openssl-legacy-provider

Windows PowerShell

Windows 命令提示符(cmd)

set NODE_OPTIONS=--openssl-legacy-provider

为 Windows 设置全局环境变量
👇 这个方法对 Windows 系统来说简直就是万金油,99% 解决问题 👇

Win + R 打开 运行,输入 sysdm.cpl 后回车,选择 高级 选项,点击右下角 环境变量,点击 用户变量 中的 新建,变量名 为 NODE_OPTIONS,变量值 为 --openssl-legacy-provider。随后一直 确定 即可。

为 Vue 项目添加命令行参数
修改 packages.json 中 scripts 的一些字段:

//mac电脑
"scripts": {
  "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
   "build": "export NODE_OPTIONS=--openssl-legacy-provider &&  npm install && vue-cli-service build",
 },
 //Windows
"scripts": {
  "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
   "build": "set NODE_OPTIONS=--openssl-legacy-provider &&  npm install && vue-cli-service build",
 },
 

为 React 项目添加命令行参数
修改 packages.json 中 scripts 的一些字段:

"scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

终极方案:降版本

装个低版本的没受到影响的 Node.js 不就好了 😅

比如 Node.js v16.x 就是不错的选择。如果你不知道去哪里下载,你可以去 Node.js Release - v16.x 看看。对于 Windows 用户,点击链接后可以看到高亮部分,下载它并安装即可。

对于 nvm 用户来说,切换 Node.js 版本只需要一行命令即可:

如果你也想在多个 Node.js 版本之间快速切换,不妨了解一下 nvm 是否适合你。它可在 Windows 和 Linux, macOS, WSL 等系统上运行。