第一步 使用yarn创建vite+vue3项目

• yarn create vite

遇到创建报错看

创建vite项目报错

第二步 引入electron

我这里用的是淘宝镜像下载的包

cnpm install electron --save-dev

第三步 创建main.js

• 在根目录创建electron文件夹
• 在electron 文件夹下面创建 main.js
  

在electron下面的main.js写入下面代码

const { app, BrowserWindow } = require('electron');function createWindow() {const win = new BrowserWindow({width: 1024,height: 768,webPreferences: {nodeIntegration: true}});win.loadURL('http://localhost:5173'); // Vite 默认的开发服务器地址win.webContents.openDevTools();
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});

第四步 安装同时运行多条命令npm包&&修改package.json文件

npm包

cnpm install concurrently --save-dev

增加一条electron运行脚本命令

"start:electron": "concurrently \"vite\" \"electron .\""

• 以下完整代码

{"name": "myproject","private": true,"version": "0.0.0","main": "electron/main.js","scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","start:electron": "concurrently \"vite\" \"electron .\""},"dependencies": {"vue": "^3.4.19"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.4","concurrently": "^8.2.2","electron": "^29.1.1","electron-builder": "^24.13.3","typescript": "^5.2.2","vite": "^5.1.4","vue-tsc": "^1.8.27"}
}

效果图