vue3+electron12+dll을 사용하여 클라이언트 구성을 개발하는 방법

창고 소스 수정

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

구성을 시작하기 전에 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

Notes

script-setup을 사용할 때 프롬프트에 해당하는 내용을 삭제하세요. 모듈로 서빙 단계에서는 정상적으로 사용할 수 있지만 빌드 후에는 컴포넌트가 로드되지 않고 페이지가 비어 있으며 오류가 보고되지 않습니다. 이유는 알 수 없습니다

electron-edge-js를 사용하여 로드합니다. c#으로 개발한 dll 파일인데 구성과정이 좀 번거롭고 답을 찾는데 2일이나 걸렸으나 모두 실패했습니다. 해결방법은 다음과 같습니다. 맞는 약을 드셔야 합니다

C++로 개발된 DLL과 C#으로 개발된 DLL은 서로 다릅니다. 로더, C++에서는 ffi-napi를 사용합니다.

edge를 사용하려면 세 가지 구성을 동시에 추가해야 합니다.

아무 것도 구성되지 않으면 Uncaught (in promise) Error: Cannot find module '...node_moduleselectrondistresourceselectron.asarrenderernativewin32x6414.16.0edge_nativeclr'이 발생합니다. .config.js 파일이 추가되어야 합니다. 구성 파일이 없는 경우 package.json과 동일한 수준으로 생성되어야 합니다.

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js']
        }
    }
}

구성이 활성화되지 않으면 __dirname __filename과 같은 nodejs 내장 변수를 사용할 수 없습니다.
Uncaught (약속) ReferenceError: __dirname이 정의되지 않았습니다. 먼저 새 BrowserWindow를 구성해야 합니다

{      
    // 如果使用到nodejs的api，则打包时需要将此设置为true
    nodeIntegration: true,
    // 同时，需要设置此项为false
    // 未设置时报 Uncaught ReferenceError: require is not defined
    contextIsolation: false  
}

위 구성 후 완료되면 Uncaught(약속됨)가 보고됩니다.) TypeError: fs.existsSync는 함수가 아닙니다
이때 vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js'],
            // 此处同样需要开启，将会在编译阶段将引用关系写入
            nodeIntegration: true, 
        }
    }
}

의 구성 항목을 계속 추가해야 합니다. 이 항목을 별도로 구성하는 경우, 하지만 nodeIntegration을 켜지 마세요: 새 BrowserWindow의 경우 Uncaught ReferenceError가 발생합니다: require가 정의되지 않았습니다

此外，对于dll放置的文件夹，一般在项目根目录创resources用于存放资源，并且项目打包过程中会不会直接打包资源目录，所以需要增加资源配置，以防止出错。对于文件的引用，在开发环境下，为当前所看到的结构，当编译打包后，为安装目录下resources目录，所以生产和开发的引用文件存在一定区别，可以实验后再看文件引用

 module.exports = {
     pluginOptions: {
         electronBuilder: {
             externals: ['electron-edge-js'],
             // 此处同样需要开启，将会在编译阶段将引用关系写入
             nodeIntegration: true, 
             builderOptions:{
                 extraResources: {
                     // 拷贝静态文件到指定位置，否则会提示文件找不到
                     from: 'resources/',
                     to: './'
                 },
             }
         }
     }
 }

提供文件获取目录方法，可以直接获取不同操作系统下app的resource目录，如果是window即 process.platform==='win32'

const path = require('path')
export function getAppResourcePath (filePath:string) {
    if (process.platform === 'darwin' || process.platform === 'linux') {
        if (process.env.NODE_ENV === 'development') {
            return path.resolve('resources/' + filePath)
        } else {
            return path.join(__dirname, '..') + filePath
        }
    } else {
        return path.resolve('resources/' + filePath)
    }
}

使用setup语法时，需使用require('electron-edge-js')引入，不可以使用import，否则会报 Syntax Error: TypeError: Cannot read property 'content' of null 而非 setup语法，则可以直接import

无边框窗口

系统本身是带有框架的，如果需要自定义框架，可以使用frameless 设置，如果需要使用自定义组件(比如 div.custom-frame-title)拖拽操作窗口时，需要给对应的元素增加样式:

 .custom-frame-title {
   -webkit-user-select: none; // 此项防止与文本选择冲突
   -webkit-app-region: drag; // 此项为系统相应状态栏
 }

前后台通知

import {ipcMain,ipcRenderer} from 'electron'

在electron中有很多可用api，其中最重要的是：ipcMain和ipcRenderer，用于ui进程和系统进程的通信。 在vue内使用ipcRenderer.on('eventname') 接受系统发来的消息，用ipcRenderer.send('eventname') 发送通知给系统，同样ipcMain可以在主线程使用。

ipc通常结合自定义标题栏完成以下操作，或者其他需要操作窗口本身的事件

win.minimize() //最小化窗口
win.maximize() //最大化窗口
win.close() //关闭窗口
win.hide() //隐藏窗口

위 내용은 vue3+electron12+dll을 사용하여 클라이언트 구성을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!