Vite + Vue.3.0 + Electron 集成搭建桌面app应用
环境
Node.js >=12.0.0
已安装vite，安装方式可以百度一下
安装yarn（可选）（下面步骤使用的yarn命令执行，npm或cnpm可自行转换命令）
1.创建vue模板的vite项目
yarn create @vitejs/app my-vue-app --template vue
image.png
cd my-vue-app
yarn
yarn dev
image.png
当前项目目录结构
image.png
2.安装electron相关模块
yarn add electron -D
3.增加electron需要用到的文件
electron需要用到以下文件，需要手工创建
- main.js
- preload.js
当前项目目录结构
image.png
PS: main.js和preload.js的内容可直接复制electron-quick-start项目
preload.js无需修改
main.js需要修改BrowserWindow加载地址（dist目录是vue build后的目录）
mainWindow.loadFile('index.html') 改成 mainWindow.loadFile('dist/index.html')
4.修改vite项目配置文件
修改vite.config.js 文件，配置app项目根路径
base: path.resolve(__dirname, './dist')
image.png
5.修改package.json
electron main 入口配置
-
electron 启动脚本配置
"main": "main.js", "electron:start": "vite build & electron ."
image.png
大功告成（源码已经放到github： electron-quick-start )
image.png
后续补充
1.区分发布和开发环境（开发hotreload）
判断环境，正式打包：mainWindow.loadFile('index.html')
开发调试：mainWindow.loadURL(http://localhost:3000/)
