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需要用到以下文件，需要手工创建

1. main.js
2. 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

1. electron main 入口配置

2. 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/)