vuejs vuetify 애플리케이션에서 전자 오류를 해결하는 방법

Question

내 vuejs/vuetify 앱에서 Electron을 작동시키는 데 문제가 있습니다.

다음 오류는 어떻게 해결해야 할지 모르겠습니다.

내가 사용하고 있는 도구 버전은 다음과 같습니다.

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은 webpack v4 모듈에 주요 변경 사항을 초래하는 SSL 공급자의 보안 취약점을 수정합니다. 참조: https://stackoverflow.com/a/73027407/20130767

빠르고 더러운 해결 방법은 Node.js v16으로 다운그레이드하는 것이지만 이로 인해 빌드가 보안 위협에 노출됩니다(위 참조에서 설명). Node.js v18에서 작동하는 더 나은 솔루션을 아래에 설명하겠습니다.

솔루션

저도 똑같은 문제가 있었는데 다음 방법으로 해결했습니다.

• 웹팩 5.0.0으로 업그레이드하세요. package-lock.json 파일로 이동하여 4.x.x webpack의 모든 버전을 5.0.0으로 변경합니다. (ctrl f를 누르고 "webpack"을 검색하세요: "4는 webpack의 모든 버전 4를 찾습니다.)
• 노드 모듈을 제거하고 npm i를 사용하여 다시 설치
• 완료되면 Electron이 시작되지만 "Background.js" package.json 파일에 대해 "DeprecationWarning: Invalid 'main' field..."라는 오류가 발생할 수 있습니다. 계속해서 package.json에서 "main" 키와 값을 삭제하세요. 그런 다음 "Background.js"를 src 폴더로 이동하세요. "preload.js" 파일이 있는 경우 "Background.js" 파일에서 해당 경로를 적절하게 편집하세요