如何解决Vue.js+Vuetify项目中的Electron运行错误

问题详情 #

工具版本 #

• vue --version：@vue/cli 5.0.4
• node -v：v18.12.1

项目依赖（package.json） #

"dependencies": {
  "core-js": "^3.8.3",
  "vue": "^2.6.14",
  "vuetify": "^2.6.0"
}

项目创建流程 #

1. 执行vue create testvue02创建项目
2. 进入项目目录：cd testvue02
3. 添加Vuetify插件：vue add vuetify - 此时执行npm run serve可正常编译并显示默认Vue/Vuetify页面
4. 添加Electron构建插件：vue add electron-builder
5. 启动Electron：npm run electron:serve，触发报错

控制台报错内容 #

> testvue02@0.1.0 electron:serve
> vue-cli-service electron:serve

INFO  正在启动开发服务器...

DONE  编译成功，耗时12524ms   下午2:45:44

应用运行地址：
- 本地:   http://localhost:8080/
- 网络:   http://192.168.1.68:8080/

注意：开发构建未做优化，如需生产构建请运行npm run build。

-  打包主进程...node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
              ^

错误: error:0308010C:数字信封例程::不支持
    在 new Hash (node:internal/crypto/hash:71:19)
    在 Object.createHash (node:crypto:133:10)
    在 module.exports (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\util\createHash.js:135:53)
    在 NormalModule._initBuildHash (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:417:16)
    在 handleParseError (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:471:10)
    在 C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:503:5
    在 C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:358:12
    在 C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    在 iterateNormalLoaders (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    在 Array.<anonymous> (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:数字信封例程::初始化错误' ],
  library: '数字信封例程',
  reason: '不支持',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1

解决方法 #

该报错源于Node.js 17及以上版本默认采用OpenSSL 3.0，而项目依赖的旧版Webpack不支持其新哈希算法，以下三种方案任选其一即可：

方法一：临时添加环境变量（单次生效） #

在启动命令前指定使用旧版哈希算法：

• Windows命令提示符（cmd）：

set NODE_OPTIONS=--openssl-legacy-provider && npm run electron:serve

• Windows PowerShell：

$env:NODE_OPTIONS="--openssl-legacy-provider"; npm run electron:serve

• Linux/macOS终端：

NODE_OPTIONS=--openssl-legacy-provider npm run electron:serve

方法二：修改package.json启动脚本（永久生效） #

打开项目根目录的package.json，找到scripts字段下的electron:serve，修改为对应系统的命令：

• Windows系统：

"scripts": {
  // 保留其他原有脚本
  "electron:serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:serve"
}

• Linux/macOS系统：

"scripts": {
  // 保留其他原有脚本
  "electron:serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:serve"
}

修改后直接执行npm run electron:serve即可。

方法三：降级Node.js版本 #

若不想修改环境变量，可将Node.js降级到v16.x或更低版本（该版本默认使用OpenSSL 1.1.1，无兼容性问题）：

1. 安装Node版本管理器（nvm）
2. 安装v16.x版本：nvm install 16.20.2
3. 切换到该版本：nvm use 16.20.2
4. 重新安装项目依赖：npm install
5. 再次运行npm run electron:serve

内容的提问来源于stack exchange，提问作者Jerry