Comment résoudre les erreurs électroniques dans l'application vuejs vuetify

Question

J'ai du mal à faire fonctionner Electron dans mon application vuejs/vuetify.

Je ne sais pas comment corriger l'erreur suivante.

Voici les versions des outils que j'utilise :

vue --version = @vue/cli 5.0.4

node-v=v18.12.1

package.json "dépendances": { "core-js": "^3.8.3", "vue": "^2.6.14", "vuetify": "^2.6.0"

J'ai créé mon application en utilisant ces commandes depuis la ligne de commande admin :

-vue crée testvue02

-cd testvue02

-vue add vuetify - J'ai fait un "npm runserve" et cela a compilé et affiché les valeurs par défaut page Web vue/vuetify

-vue ajoute un constructeur d'électrons

-npm run electron:service

Voici la sortie de la console :

> 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

Raison

NodeJs v18 corrige une vulnérabilité de sécurité dans le fournisseur SSL qui a provoqué des modifications importantes du module webpack v4. Référence : https://stackoverflow.com/a/73027407/20130767

Une solution simple et rapide consiste à rétrograder vers Node.js v16, mais cela expose votre build à des menaces de sécurité (expliquées dans la référence ci-dessus). Je vais décrire ci-dessous une meilleure solution qui fonctionne avec Node.js v18.

Solution

J'ai eu exactement le même problème et je l'ai résolu en :

• Mise à niveau vers webpack 5.0.0. Accédez au fichier package-lock.json et remplacez toutes les versions du webpack 4.x.x par 5.0.0. (ctrl f et recherche "webpack": "4 trouve toutes les versions 4 de webpack)
• Supprimez les modules de nœuds et réinstallez-les à l'aide de npm i
• Une fois terminé, Electron démarrera, mais vous pourriez obtenir cette erreur : "DeprecationWarning: Invalid 'main' field..." pour votre fichier package.json "background.js". Allez-y et supprimez la clé et la valeur « principale » de package.json. Déplacez ensuite "background.js" dans votre dossier src. Si vous avez le fichier "preload.js", veuillez modifier son chemin en conséquence dans le fichier "background.js"