vue3+electron12+dll을 사용하여 클라이언트 구성을 개발하는 방법-View.js-php.cn

창고 소스 수정

전자버전 미상으로 인해 서버가 사용 가능하고 빌드 후 흰색 화면이 뜨는 상황이 발생할 수 있으니 주의가 필요합니다. 코드 롤백을 용이하게 하기 위해 사용 가능한 버전을 커밋하는 것이 가장 좋습니다. 더 나은 정보가 있는 사람은 이를 공유하고 싶어합니다.

구성을 시작하기 전에 Yarn 및 npm의 rc 파일을 약간 수정할 수 있습니다. 명령이나 파일을 사용하여 .npmrc 또는 .yarnrc를 직접 수정할 수 있습니다. 이 두 개의 전역 구성 파일은 일반적으로 현재 계정의 C:user 폴더에 있습니다. , 또는 현재 프로젝트 아래에 새 파일 명령 rc 파일을 생성하여 구성을 로컬로 변경합니다.
네트워크 문제로 전자 다운로드가 실패하기 때문에 타오바오 소스로 변경하고, 화웨이 소스도 사용 가능합니다.

npm set config registry http://registry.npm.taobao.org/
npm set config chromedriver_cdnurl http://registry.npm.taobao.org/chromedriver
npm set config electron_mirror http://registry.npm.taobao.org/electron/
npm set config electron_builder_binaries_mirror http://registry.npm.taobao.org/electron-builder-binaries/

로그인 후 복사

설치 과정에서 vue create 을 사용하여 vue3 버전을 선택하세요. 콘텐츠가 생성된 후 프로젝트 디렉터리에 들어가서 vue electronic-builder를 추가하여 전자를 구성하고 현재 버전 12를 선택하세요.

Startup

해당 시작 명령이 package.json에 어셈블되었습니다.

npm run Electron:serve를 사용하여 개발을 시작하세요
npm run Electron:build를 사용하여 프로덕션용 컴파일 및 패키징

vue- devtools 바꾸기

프로젝트 프로젝트 아래의 src/Background.ts는 Electron의 시작 디렉터리입니다. 개발 환경에서 시작 대기 시간이 길어지면 다음과 같은 상황이 발생합니다

Electron을 실행하는 중...
확장 프로그램 가져오기 실패, 4번 더 시도
확장 프로그램 가져오기 실패, 3번 더 시도
확장 프로그램 가져오기 실패, 2번 더 시도
확장 프로그램 가져오기 실패, 1번 더 시도

은 프로젝트 연결이 필요하기 때문입니다. vue-devtools를 다운로드하고 로드하려면 Google 스토어로 이동하세요.

도구를 로드하는 방법을 여러 가지 시도했지만 모두 실패했기 때문에 임시 해결책은 도구를 제거하는 것입니다. 코드가 발견되었습니다. installExtension을 제거하세요.

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
    //  await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

로그인 후 복사

이전에 여러 가지 방법을 시도했지만 작동하지 않았습니다. 나중에 다음 내용을 주의 깊게 비교한 결과 몇 가지 문제점을 발견했습니다.

vue3 버전은 vue-devtools의 vue2 버전과 다르기 때문에 vue3에서는 vue2의 dev-tools를 사용할 수 없습니다. 따라서 vue3에 해당하는 개발 도구를 다운로드해야 합니다. vue2의 최신 버전은 5.x이고, vue3의 버전은 6.x 베타 버전입니다. 이 버전의 플러그인은 crx4chrome을 통해 다운로드할 수 있습니다. 다운로드한 crx의 압축을 풀고 프로젝트 루트 디렉터리에 복사합니다. 세션 로딩을 사용하여 원래 wait installExtension(VUEJS_DEVTOOLS) 부분을

import {session} from 'electron'

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
    const vue_devtools = 'ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com'
    await session.defaultSession.loadExtension(path.resolve(vue_devtools))
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

로그인 후 복사

로 교체합니다. 프로젝트를 시작한 후 vue 확장을 볼 수 있습니다.

(노드:5904) ExtensionLoadWarning: E:scanvue3_electronljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com에서 확장 프로그램을 로드하는 중 경고:
인식할 수 없는 매니페스트 키 'browser_action'.
인식할 수 없는 매니페스트 키 'update_ url '.
권한 'contextMenus'를 알 수 없거나 URL 패턴의 형식이 잘못되었습니다.
파일 또는 디렉터리 이름이 _metadata인 확장자를 로드할 수 없습니다. "_"로 시작하는 파일 이름은 시스템에서 사용하도록 예약되어 있습니다.
(`electron --trace-warnings ...` 사용) 경고가 생성된 위치를 표시합니다)

무시해도 됩니다. 귀찮은 프롬프트를 보고 싶지 않다면 tools