[Electron] 搭建 Vite+Electron 项目

安装

搭建 Vite 项目（根据官方文档搭建），安装 electron、nodemon。

pnpm install electron nodemon -D

配置

electron/main.js

file:[electron/main.js]import { app, BrowserWindow } from "electron";const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600});win.loadURL("http://localhost:5173");win.webContents.openDevTools();win.webContents.on("did-finish-load", () => {console.log("page loaded finished.");});
};app.whenReady().then(() => {createWindow();
});app.on("window-all-closed", () => {if (process.platform !== "darwin") app.quit();
});

nodemon.json

file:[nodemon.json]{"exec": "electron .","watch": ["./"],"ext": "js,json,.html,.css,.vue,.ts","delay": "1"
}

package.json

file:[package.json]{"name": "vite-vue3-electron","private": true,"version": "0.0.0","type": "module","main": "electron/main.js","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview","electron": "nodemon --config nodemon.json"},"dependencies": {"vue": "^3.4.37"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.2","electron": "^32.1.2","nodemon": "^3.1.7","typescript": "^5.5.3","vite": "^5.4.1","vue-tsc": "^2.0.29"}
}

启动项目

pnpm dev
pnpm electron

预览效果