使用 Electron 开发程序

文章目录

• 概述
• 打包测试
• 运行
• 开发调试

概述

使用 electron-vite 进行开发跨平台桌面应用
文档：https://cn-evite.netlify.app/guide/

按照文档指示安装

PS D:\Project> npm create @quick-start/electron
Need to install the following packages:
  @quick-start/[email protected]
Ok to proceed? (y)
√ Project name: ... MeConQ
√ Package name: ... meconq
√ Select a framework: » vue
√ Add TypeScript? ... No / Yes
√ Add Electron updater plugin? ... No / Yes
√ Enable Electron download mirror proxy? ... No / Yes # 强烈建议选 yes， 不然后面会被网络问题整死的

Scaffolding project in D:\Project\MeConQ...

Done. Now run:

  cd MeConQ
  npm install
  npm run dev

安装一下相关包

PS D:\Project> cd MeConQ
PS D:\Project\MeConQ> npm install

后面卡这好久

[##################] | reify:app-builder-bin: http fetch GET 200 https://cdn.npmmirror.com/packages/app-builder-bin/4.0 

建议使用代理

或者控制台中先输入以下代码

npm config set ELECTOR_MIRROR=https://npmmirror.com/mirrors/electron/ 

然后再进行安装

上面方法我都卡住了，最后换用 cnpm 终于安装成功了

打包测试

我先试了下 npm run build:win

开始一切顺利

npm run build:win

> meconq@1.0.0 build:win
> npm run build && electron-builder --win --config

> [email protected] build
> electron-vite build

vite v4.5.0 building for production...
✓ 2 modules transformed.
out/main/index.js  1.43 kB
✓ built in 59ms
vite v4.5.0 building for production...
✓ 1 modules transformed.
out/preload/index.js  0.42 kB
✓ built in 9ms
vite v4.5.0 building for production...
✓ 11 modules transformed.
../../out/renderer/index.html                   0.52 kB
../../out/renderer/assets/icons-e5112e1e.svg    9.06 kB
../../out/renderer/assets/index-4b0e6ae1.css    2.74 kB
../../out/renderer/assets/index-2cdf0bd1.js   151.06 kB
✓ built in 529ms
  • electron-builder  version=24.6.4 os=10.0.22621
  • loaded configuration  file=D:\Project\MeConQ\electron-builder.yml
  • writing effective config  file=dist\builder-effective-config.yaml
  • skipped dependencies rebuild  reason=npmRebuild is set to false
  • packaging       platform=win32 arch=x64 electron=25.9.3 appOutDir=dist\win-unpacked
  • downloading     url=https://npmmirror.com/mirrors/electron/25.9.3/electron-v25.9.3-win32-x64.zip size=100 MB parts=8
  • downloaded      url=https://npmmirror.com/mirrors/electron/25.9.3/electron-v25.9.3-win32-x64.zip duration=26.492s

直到它开始从 github 下载文件

  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z size=1.3 MB parts=1
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1

这里是不走代理的，大概率下载失败

所以可以先把三个包下载下来后，将他们拷贝到C:\Users\[your name]\AppData\Local\electron-builder\Cache目录下，新建两个文件夹winCodeSign和nsis，将压缩包解压到对应的目录，结构如下

• winCodeSign\winCodeSing-2.6.0
• nsis\nsis-3.0.4.1
• nsis\nsis-resources-3.4.0

然后再执行npm run build:win，打包成功了，可执行文件在dist目录下

再试了试npm run build:mac提示

  ⨯ Build for macOS is supported only on macOS, please see https://electron.build/multi-platform-build

又试了试 npm run build:linux

  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/snap-template-4.0-2/snap-template-electron-4.0-2-amd64.tar.7z size=1.5 MB parts=1
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/appimage-12.0.1/appimage-12.0.1.7z size=1.6 MB parts=1

又是这样，直接不折腾了

运行

命令行输入 npm run dev，弹出窗口说明成功了

开发调试

修改 src/renderer 目录下文件即可，是热重载的