So beheben Sie Elektronenfehler in der Vuejs-Vuetify-Anwendung

Question

Ich habe Probleme, Electron in meiner vuejs/vuetify-App zum Laufen zu bringen.

Ich bin mir nicht sicher, wie ich den folgenden Fehler beheben kann.

Hier sind die Versionen der Tools, die ich verwende:

vue --version = @vue/cli 5.0.4

node-v=v18.12.1

package.json "Abhängigkeiten": { „core-js“: „^3.8.3“, "vue": "^2.6.14", „vuetify“: „^2.6.0“

Ich habe meine Anwendung mit diesen Befehlen aus der Admin-Befehlszeile erstellt:

-vue erstellt testvue02

-cd testvue02

-vue add vuetify – Ich habe ein „npm runserve“ ausgeführt und dieses wurde kompiliert und zeigte die Standardeinstellungen an vue/vuetify-Webseite

-vue fügt Elektronenbildner hinzu

-npm run electron:service

Dies ist die Konsolenausgabe:

> 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”文件中相应地编辑其路径