Bagaimana untuk menyelesaikan ralat elektron dalam aplikasi vuejs vuetify

Question

Saya menghadapi masalah untuk mendapatkan Electron berfungsi dalam apl vuejs/vuetify saya.

Saya tidak pasti cara membetulkan ralat berikut.

Berikut ialah versi alatan yang saya gunakan:

vue --version = @vue/cli 5.0.4

nod-v=v18.12.1

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

Saya mencipta aplikasi saya menggunakan arahan ini daripada baris arahan pentadbir:

-vue mencipta testvue02

-cd testvue02

-vue add vuetify - Saya melakukan "npm runserve" dan ini telah menyusun dan menunjukkan lalai halaman web vue/vuetify

-vue menambah pembina elektron

-npm run electron:service

Ini ialah output konsol:

> 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

Sebab

NodeJs v18 membetulkan kerentanan keselamatan dalam penyedia SSL yang menyebabkan pecahnya perubahan pada modul webpack v4. Rujukan: https://stackoverflow.com/a/73027407/20130767

Pembetulan cepat dan kotor ialah menurunkan taraf kepada Node.js v16, tetapi ini mendedahkan binaan anda kepada ancaman keselamatan (diterangkan dalam rujukan di atas). Saya akan menggariskan penyelesaian yang lebih baik di bawah yang berfungsi dengan Node.js v18.

Penyelesaian

Saya mengalami masalah yang sama dan menyelesaikannya dengan:

• Naik taraf kepada webpack 5.0.0. Pergi ke fail package-lock.json dan tukar semua versi 4.x.x webpack kepada 5.0.0. (ctrl f dan cari "webpack":"4 menemui semua versi 4 webpack)
• Alih keluar modul nod dan pasang semula menggunakan npm i
• Setelah selesai, Electron akan bermula, tetapi anda mungkin mendapat ralat ini: "DeprecationWarning: Medan 'utama' tidak sah..." untuk fail package.json "background.js" anda. Teruskan dan padamkan kunci dan nilai "utama" daripada package.json. Kemudian alihkan "background.js" ke dalam folder src anda. Jika anda mempunyai fail "preload.js", sila edit laluannya dengan sewajarnya dalam fail "background.js"