Vue-Electron项目构建报错error:0308010C，求解决方案

问题场景 #

使用electron-builder创建Vue-Electron项目，执行yarn run electron:serve时触发以下错误：

yarn run v1.22.19
$ vue-cli-service electron:serve
 INFO  Starting development server...


 DONE  Compiled successfully in 3437ms                                                                                                        00:29:29


  App running at:

  Note that the development build is not optimized.
  To create a production build, run yarn build.

-  Bundling main process...node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at module.exports (D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\vue-cli-plugin-electron-builder\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at D:\coding\JavaScript\Vue\electro\vue3-electron\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

已尝试无效操作：

• 在serve命令后追加--openssl-legacy-provider参数
• 切换Node.js版本为17、18、19

可行解决方案 #

方案1：全局注入NODE_OPTIONS到启动命令 #

vue-cli-plugin-electron-builder会分别打包主进程和渲染进程，直接追加参数可能只作用于渲染进程，需全局注入参数：

跨平台（需先安装cross-env）：

yarn add cross-env --dev

修改package.json的scripts：

"scripts": {
  "electron:serve": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" vue-cli-service electron:serve"
}

Windows系统直接写法：

"scripts": {
  "electron:serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service electron:serve"
}

方案2：升级vue-cli-plugin-electron-builder #

旧版本插件依赖的webpack版本较低，与高版本Node.js的SSL加密逻辑不兼容，执行升级：

yarn upgrade vue-cli-plugin-electron-builder --latest
# 或npm
npm update vue-cli-plugin-electron-builder

升级后重新安装依赖：

yarn install
# 或npm
npm install

方案3：切换到Node.js 16.x版本 #

Node.js 16.x未移除旧加密算法，不会触发该错误。用nvm管理版本：

# 安装Node.js 16
nvm install 16
# 切换到16版本
nvm use 16

之后重新安装依赖并启动项目。

方案4：强制webpack使用兼容的哈希算法 #

在项目根目录创建vue.config.js（无则新建），添加以下配置：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: (config) => {
        config.output.hashFunction('sha256');
      },
      chainWebpackRendererProcess: (config) => {
        config.output.hashFunction('sha256');
      }
    }
  }
}

强制webpack使用sha256哈希算法，避开Node.js 17+不支持的旧算法。

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