如何解決 vuejs vuetify 應用程式中的電子錯誤

Question

我在讓 Electron 在我的 vuejs/vuetify 應用程式中工作時遇到問題。

我不確定如何修復以下錯誤。

以下是我正在使用的工具的版本：

vue --version = @vue/cli 5.0.4

節點-v = v18.12.1

套件.json 「依賴項」：{ "core-js": "^3.8.3", "vue": "^2.6.14", “vuetify”：“^2.6.0”

我使用管理命令列中的這些命令創建了我的應用程式：

-vue建立testvue02

-cd testvue02

-vue add vuetify - 我做了一個“npm runserve”，這確實編譯並顯示了預設值 vue/vuetify 網頁

-vue 新增電子建構器

-npm 運行電子：服務

這是控制台輸出：

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

INFO  Starting development server...

DONE  Compiled successfully in 12524ms   2:45:44 PM

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.1.68:8080/

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

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

Error: error:0308010C:digital envelope routines::unsupported
 at new Hash (node:internal/crypto/hash:71:19)
 at Object.createHash (node:crypto:133:10)
 at module.exports (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\util\createHash.js:135:53)
 at NormalModule._initBuildHash (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:417:16)
 at handleParseError (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:471:10)
 at C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:503:5
 at C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:358:12
 at C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:373:3
 at iterateNormalLoaders (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
 at 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:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1

Answer 1

原因

NodeJs v18 修復了 SSL 提供者中的一個安全漏洞，該漏洞導致 webpack v4 模組發生重大變更。參考：https://stackoverflow.com/a/73027407/20130767

#一個快速但骯髒的修復方法是降級到 Node.js v16，但這會使您的構建面臨安全威脅（在上面的參考文獻中進行了解釋）。我將在下面概述一個與 Node.js v18 配合使用的更好的解決方案。

解決方案

我遇到了完全相同的問題並透過以下方式解決了它：

• 升級到 webpack 5.0.0。進入 package-lock.json 檔案並將所有版本 4.x.x webpack 更改為 5.0.0。 （ctrl f 並蒐索「webpack」：「4 尋找所有版本 4 的 webpack）
• 刪除節點模組並使用 npm i 重新安裝
• 完成後，電子將啟動，但您可能會收到此錯誤：「DeprecationWarning：無效的'main'欄位...」您的「background.js」的package.json檔案。繼續並從 package.json 中刪除“main”鍵和值。然後將“background.js”移動到您的 src 資料夾中。如果您有「preload.js」文件，請在「background.js」檔案中相應地編輯其路徑