Vite + Vue.3.0 + Electron 集成搭建桌面app應(yīng)用
環(huán)境
Node.js >=12.0.0
已安裝vite文黎，安裝方式可以百度一下
安裝yarn（可選）（下面步驟使用的yarn命令執(zhí)行耸携，npm或cnpm可自行轉(zhuǎn)換命令）
1.創(chuàng)建vue模板的vite項(xiàng)目
yarn create @vitejs/app my-vue-app --template vue
image.png
cd my-vue-app
yarn
yarn dev
image.png
當(dāng)前項(xiàng)目目錄結(jié)構(gòu)
image.png
2.安裝electron相關(guān)模塊
yarn add electron -D
3.增加electron需要用到的文件
electron需要用到以下文件携御，需要手工創(chuàng)建
- main.js
- preload.js
當(dāng)前項(xiàng)目目錄結(jié)構(gòu)
image.png
PS: main.js和preload.js的內(nèi)容可直接復(fù)制electron-quick-start項(xiàng)目
preload.js無需修改
main.js需要修改BrowserWindow加載地址（dist目錄是vue build后的目錄）
mainWindow.loadFile('index.html') 改成 mainWindow.loadFile('dist/index.html')
4.修改vite項(xiàng)目配置文件
修改vite.config.js 文件，配置app項(xiàng)目根路徑
base: path.resolve(__dirname, './dist')
image.png
5.修改package.json
electron main 入口配置
-
electron 啟動腳本配置
"main": "main.js", "electron:start": "vite build & electron ."
image.png
大功告成（源碼已經(jīng)放到github： electron-quick-start )
image.png
后續(xù)補(bǔ)充
1.區(qū)分發(fā)布和開發(fā)環(huán)境（開發(fā)hotreload）
判斷環(huán)境，正式打包：mainWindow.loadFile('index.html')
開發(fā)調(diào)試：mainWindow.loadURL(http://localhost:3000/)
