Electron+Vue3+TypeScript+Vite桌面應(yīng)用程序項(xiàng)目初始化
初始化vite項(xiàng)目
yarn create vite todolist --template vue-ts
[圖片上傳失敗...(image-917e0-1652326973758)]
cd todolist
yarn
yarn dev
瀏覽器訪問3000端口
[圖片上傳失敗...(image-ab0455-1652326973758)]
安裝Electron
yarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer
如果覺得安裝慢尼夺，可以改為淘寶鏡像伏社，或者根目錄添加.yarnrc文件
registry "https://registry.npm.taobao.org/"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror "http://npm.taobao.org/mirrors/electron-builder-binaries/"
插件說明
electron-builder：打包工具
rimraf：快速刪除文件或目錄工具
vite-plugin-electron：vite 結(jié)合 electron 的庫(kù)刁赖，關(guān)于這個(gè)插件可以參見 Vite 與 Electron 無縫銜接
electron-devtools-installer：electron 開發(fā)工具
vite-plugin-electron 插件是將 vite 和 electron 結(jié)合在一起的锌畸，可以讓我們非常方便的結(jié)合 electron 和 vue，需要做一些指定的配置嗦枢。
初始化electron項(xiàng)目
新建目錄文件electron-main/index.ts主進(jìn)程目錄和文件阅悍、electron-preload/index.ts預(yù)加載目錄和文件
// electron-main/index.ts
import { app, BrowserWindow } from 'electron';
import path from 'path';
const createWindow = () => {
const win = new BrowserWindow({
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
preload: path.join(__dirname, '../electron-preload/index.js'),
},
});
if (app.isPackaged) {
win.loadFile(path.join(__dirname, '../index.html'));
} else {
// Use ['ENV_NAME'] avoid vite:define plugin
const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`;
win.loadURL(url);
}
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
需要注意引入的預(yù)加載文件應(yīng)該是打包后的 js 文件，路徑和 ts 文件路徑相同弦撩，只要類型改為 js 即可步咪。
// electron-preload/index.ts
import os from 'os';
console.log(os.platform()); // 測(cè)試打印一下系統(tǒng)平臺(tái)
配置vite-electron
tsconfig.json
在 tsconfig.json 中監(jiān)聽 electron 相關(guān)文件和提示
"include": [..., "electron-main/**/*.ts", "electron-preload/**/*.ts"],
省略號(hào)是之前的配置，copy后面一段代碼粘貼即可
vite.config.ts配置
配置主進(jìn)程和預(yù)加載腳本地址
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';
import electron from 'vite-plugin-electron';
import electronRenderer from 'vite-plugin-electron/renderer';
import polyfillExports from 'vite-plugin-electron/polyfill-exports';
export default defineConfig({
plugins: [
vue(),
electron({
main: {
entry: 'electron-main/index.ts',
},
preload: {
// Must be use absolute path, this is the limit of rollup
input: path.join(__dirname, './electron-preload/index.ts'),
},
}),
electronRenderer(),
polyfillExports(),
],
build: {
emptyOutDir: false, // 必須配置益楼，否則electron相關(guān)文件將不會(huì)生成build后的文件
},
});
package.json配置
{
"name": "todolist",
"private": true,
"version": "0.0.0",
"main": "dist/electron-main/index.js", // 增加
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"build-electron": "rimraf dist && vite build && electron-builder", // 增加
"preview": "vite preview"
},
}
主要是增加入口文件猾漫，因?yàn)?electron 還沒有原生支持 ts，因此目前還是必須加載 js 文件感凤，所以入口文件我們配置為解析后的 js 文件路徑：dist/electron-main/index.js悯周，然后修改執(zhí)行腳本，在 build-electron 命令中增加 electron-builder 打包命令陪竿。
electron-builder打包配置
{
...,
"build": {
"appId": "com.electron.desktop",
"productName": "ElectronVueVite",
"asar": true,
"copyright": "Copyright ? 2022 XingXingZaiXian",
"directories": {
"output": "release/${version}"
},
"files": [
"dist"
],
"mac": {
"artifactName": "${productName}_${version}.${ext}",
"target": [
"dmg"
]
},
"win": {
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
],
"artifactName": "${productName}_${version}.${ext}"
},
"nsis": {
"oneClick": false,
"perMachine": false,
"allowToChangeInstallationDirectory": true,
"deleteAppDataOnUninstall": false
}
}
}
運(yùn)行調(diào)試
yarn dev
[圖片上傳失敗...(image-7a201d-1652326973758)]
[圖片上傳失敗...(image-bb7882-1652326973758)]
嘗試F12調(diào)試看看禽翼，按了半天沒有反應(yīng)，應(yīng)該是沒有打開配置，修改electron-main/index.ts
const createWindow = () => {
...
// 最后添加一行代碼
win.webContents.openDevTools()
};
熱更闰挡，已經(jīng)打開了調(diào)試工具
[圖片上傳失敗...(image-58eacd-1652326973758)]
且已打印了系統(tǒng)平臺(tái)
打包
yarn run build-electron
[圖片上傳失敗...(image-39a639-1652326973758)]
執(zhí)行完后會(huì)生成兩個(gè)目錄：dist 和 release锐墙。dist 目錄中生成的是前端打包文件，release 中生成的是electron 打包文件解总，內(nèi)容如下：
[圖片上傳失敗...(image-a1b23d-1652326973758)]
其中 win-uppacked 中生成的是無需安裝的執(zhí)行文件贮匕，將此目錄直接壓縮后就可以發(fā)送給別人，解壓即可使用花枫。todolist_0.0.0.exe 文件是安裝包刻盐，打開會(huì)顯示安裝過程，執(zhí)行完安裝過程后在系統(tǒng)的控制面板中的軟件列表中可以看到該軟件劳翰，也可以執(zhí)行卸載敦锌。
結(jié)語
到這里，我們的初始化項(xiàng)目就算結(jié)束了佳簸，相信你也可以快速建立自己的第一個(gè)桌面應(yīng)用程序乙墙。
本項(xiàng)目將持續(xù)更新，希望你也持續(xù)關(guān)注生均。
