vue3+electron12+dll을 사용하여 클라이언트 구성을 개발하는 방법
- WBOY앞으로
- 2023-05-12 22:43:131722검색
창고 소스 수정
전자버전 미상으로 인해 서버가 사용 가능하고 빌드 후 흰색 화면이 뜨는 상황이 발생할 수 있으니 주의가 필요합니다. 코드 롤백을 용이하게 하기 위해 사용 가능한 버전을 커밋하는 것이 가장 좋습니다. 더 나은 정보가 있는 사람은 이를 공유하고 싶어합니다.
구성을 시작하기 전에 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
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