本文带你 一步到位 运行一个基于 Electron + Vue3 + Vite 的桌面程序，
不用任何复杂配置，只要复制命令即可弹出桌面窗口。
适合刚接触 Electron 的前端开发者。

🧩 一、前置准备

确保你电脑里安装了以下环境：

• Node.js ≥ 18

• npm ≥ 9

• 推荐使用 VSCode 开发

你可以在终端中验证：

node -v
npm -v

⚙️ 二、创建 Vue3 项目

首先我们使用 Vite 创建一个 Vue3 项目：

npm create vite@latest vue-electron-demo -- --template vue
cd vue-electron-demo

执行后，项目结构大致如下：

vue-electron-demo/
 ├─ src/
 ├─ index.html
 ├─ package.json
 └─ vite.config.js

🪄 三、安装 Electron 依赖

接着，安装 Electron 及其辅助工具：

npm install --save-dev electron electron-builder wait-on concurrently

说明：

• electron：桌面运行环境

• electron-builder：打包桌面应用

• wait-on：等待前端启动再启动 Electron

• concurrently：同时启动两个进程（Vite + Electron）

🧠 四、创建 Electron 主进程文件

在项目根目录新建一个文件夹 electron
然后在其中创建文件 main.js：

📄 electron/main.js

// Electron 主进程
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      nodeIntegration: true,
    },
  })

  // 开发环境加载本地服务器，生产环境加载打包文件
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:5173')
  } else {
    win.loadFile(path.join(__dirname, '../dist/index.html'))
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

🧩 创建 preload 文件（防止 require 报错）

在 electron 文件夹中创建：electron/preload.js
 

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  hello: () => console.log('Hello from Electron preload 👋'),
})

🔧 五、修改 package.json

编辑项目根目录下的 package.json，
在里面加上 Electron 的启动脚本：

"main": "electron/main.js",
"scripts": {
  "dev": "concurrently \"npm:dev:renderer\" \"npm:dev:electron\"",
  "dev:renderer": "vite",
  "dev:electron": "wait-on http://localhost:5173 && electron .",
  "build": "vite build && electron-builder"
},

🧩 确保没有 "type": "module"

⚠️ 如果你的 package.json 里有 "type": "module"，请删掉。
Electron 主进程默认用 CommonJS。

✅ 六、运行项目（npm run dev）

🎉 窗口中会显示默认的 Vite + Vue 欢迎页：

这意味着你已经成功跑通了 Electron 桌面端环境！
之后，你可以在这个基础上继续集成前端页面、数据交互或 AI 功能。