Vue+Electron은 간단한 데스크톱 애플리케이션을 구현합니다.

이 글은 주로 Vue+Electron을 사용한 간단한 데스크톱 애플리케이션 구현을 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

저는 C#을 사용하여 데스크톱 애플리케이션을 작성해 왔습니다. 또한 일부 웹 터미널을 작성합니다. 최근 node를 보다가 흔히 사용하는 vscode가 전자로 쓰여 있는 것을 발견하고, 게를 먹어치우려는 생각이 떠올랐습니다.

인터넷에서 전자에 대한 정보를 검색하고, 공식 문서도 연구해 본 결과 전자 앱이 실제로는 크롬 브라우저이고, UI는 모두 웹사이드 기술을 사용해 작성했기 때문입니다. 웹 애플리케이션 이전에는 당연히 Vue+Electron 조합이 떠오릅니다.

인터넷에서 검색해보니 Electron-Vue라는 기성 휠이 있어서 바로 설치해서 사용했는데, 최종 빌드 과정에서 항상 만족스러운 결과가 나오지 않더군요. 결국 네트워크 및 빌드 구성에 문제가 있다는 것을 알게 되었습니다. 사람들에게 두통을 줍니다.

그래서 저는 마침내 직접 해보기로 결정하고 Vue에서 생성된 정적 웹 페이지를 Electron과 결합했습니다.

1.Vue는 빌드 후 dist 폴더에 정적 웹 페이지가 생성됩니다. 이렇게 하면 생성된 웹 페이지가 웹 컨테이너에 배치될 때 올바르게 액세스할 수 있습니다. 파일 경로를 로컬에서 직접 열면 나중에 생성된 index.html과 리소스가 동일한 디렉터리 계층에 있지 않기 때문에 오류가 발생합니다.

webpack 프로젝트의 config/index.js를

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

2로 수정합니다. 전자 빠른 시작을 사용하여 전자 프로젝트를 빠르게 빌드하고 위에서 생성된 파일을 전자 프로젝트의 루트 디렉터리에 복사한 후 프로젝트를 실행합니다. 정상적으로 실행되는 것을 확인합니다.

3. 하지만 이전 단계는 개발 모드에서 실행하는 것입니다. 여기서는 Electron-builder를 전역적으로 설치한 후 Electron-builder --win --ia32 --dir을 입력합니다. 프로젝트 배포를 완료합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vue 페이지 세부 정보를 가져온 후 페이지 전환 시 사용자가 정보를 수정했는지 모니터링하는 방법

JS 비동기 프로그래밍 Promise, Generator, async/await

위 내용은 Vue+Electron은 간단한 데스크톱 애플리케이션을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!