VUE+Electron从0开始搭建开发环境
自己做个流程日志，
一个非常典型需求：用 Node.js 20 LTS + Vue 3 + Electron 创建一个桌面应用，启动后显示一个 “Hello World” 页面，并能打包成可执行程序。
当然，我需要它全屏显示。
下面是一个 完整、清晰、可直接照做的流程👇
🧰 一、安装环境
1️⃣ 安装 Node.js 20 LTS
从官网下载安装： 🔗 https://nodejs.org/en/download
安装后验证：
node -v npm -v
输出类似：
v20.x.x 10.x.x
2️⃣ （推荐）设置国内 npm 镜像：
npm config set registry https://registry.npmmirror.com
🧱 二、创建 Vue 3 + Vite 项目
Vue CLI 已经过时，现在 Vue 官方推荐使用 create-vue：
npm create vue@latest
会输出提示，选择项目名，以及其他各种选项，这里啥也不用选
选择示例：**
✔ Project name: … hello-electron ✔ Add TypeScript? … No ✔ Add JSX Support? … No ✔ Add Vue Router for Single Page Application development? … No ✔ Add Pinia for state management? … No ✔ Add Vitest for Unit Testing? … No ✔ Add an End-to-End Testing Solution? … No ✔ Add ESLint for code quality? … No
然后：
cd hello-electron npm install npm run dev
浏览器打开 http://localhost:5173，能看到 Vue 3 的默认页面 ✅
⚡️ 三、集成 Electron
安装 Electron + 打包工具：
npm install electron electron-builder --save-dev
1️⃣ 创建 Electron 启动文件
在项目的目录下新建：
electron/main.js
内容如下：
// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,fullscreen: true, // ✅ 直接全屏frame: false, // ✅ 不显示窗口边框和菜单栏autoHideMenuBar: true, // ✅ 隐藏默认菜单栏（防止按 Alt 显示）webPreferences: {nodeIntegration: true,contextIsolation: false}});win.loadFile(path.join(__dirname, '../dist/index.html'));//win.webContents.openDevTools(); // 打开调试窗口
}app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
2️⃣ 创建 electron/preload.js
window.addEventListener('DOMContentLoaded', () => {console.log('Preload script loaded.')
})
3️⃣ 修改 package.json
在最外层（项目根目录）中找到 scripts 部分，
"scripts": {"dev": "vite","build": "run-p type-check \"build-only {@}\" --","preview": "vite preview","build-only": "vite build","type-check": "vue-tsc --build","format": "prettier --write src/"}
修改为：
{"main": "electron/main.js","name": "eclectron_hello","version": "0.0.0","private": true,"type": "commonjs","engines": {"node": "^20.19.0 || >=22.12.0"},"scripts": {"dev": "vite","build": "vite build","preview": "vite preview","electron": "cross-env NODE_ENV=development vite & electron ./electron/main.js","electron:build": "vite build && electron-builder","build:electron": "npm run build && electron-builder"},"dependencies": {"vue": "^3.5.22","vue-router": "^4.6.3"},"devDependencies": {"@tsconfig/node22": "^22.0.2","@types/node": "^22.18.11","@vitejs/plugin-vue": "^6.0.1","@vue/tsconfig": "^0.8.1","cross-env": "^10.1.0","electron": "^38.4.0","electron-builder": "^26.0.12","npm-run-all2": "^8.0.4","prettier": "3.6.2","typescript": "~5.9.0","vite": "^7.1.11","vite-plugin-vue-devtools": "^8.0.3","vue-tsc": "^3.1.1"},"build": {"appId": "com.example.hello","productName": "HelloElectron","directories": {"output": "release"},"files": ["dist/**/*", "electron/**/*", "package.json" ],"extraResources": [],"win": {"target": ["nsis"],"forceCodeSigning": false}
}}
修改vite.config.ts，添加属性，保证相对目录的识别：
base: './' ,
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),],base: './' ,resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})
安装 cross-env（用于设置环境变量）：
npm install cross-env --save-dev
🧪 四、开发模式运行
运行：
npm run build # 编译生成vue发布的项目#开发阶段 npm run electron# 编译后 以管理员身份运行 npm run build:electron
⚡️ 会自动启动 Vite 开发服务器和 Electron 你会看到一个桌面窗口，显示 “Hello Vue 3” 页面 ✅
备注：
1）在打包过程中，需要使用管理员权限，也就是启动VSCODE时候，右键使用管理员运行；
2）其中，签名文件winCodeSign-2.6.0.7z 可能会下载失败，造成很多问题，自己下载并解压到对应的缓存目录。
📦 五、打包发布
其中，打包需要修改 package.json，在根元素下添加：
"build": {"appId": "com.example.hello","productName": "HelloElectron","directories": {"output": "release"},"files": ["dist/**/*","electron/**/*"],"win": {"target": ["nsis"],"icon": "public/favicon.ico"}
}
然后执行：
npm run electron:build
等待几分钟后，在 release/ 目录下会生成：
HelloElectron Setup.exe
双击即可安装运行桌面应用 ✅
🖥️ 六、最终目录结构示例
hello-electron/ ├─ dist/ # Vue 构建输出 ├─ electron/ │ ├─ main.js # Electron 主进程 │ └─ preload.js ├─ public/ ├─ src/ │ ├─ App.vue │ └─ main.js ├─ package.json └─ vite.config.js
💡 七、可选优化选项
| 目标 | 建议 |
|---|---|
| 自动重启 Electron | 安装 electron-reload |
| Vue 与 Electron 通信 | 使用 contextBridge + IPC |
| 生成 Mac/Linux 版本 | electron-builder 自动支持 |
| 图标更换 | 替换 public/favicon.ico 并更新 build.win.icon |
✅ 总结：完整命令流程
# 1. 安装 Node.js 20 LTS # 2. 创建 Vue3 项目 npm create vue@latest cd hello-electron npm install# 3. 安装 Electron + 构建工具 npm install electron electron-builder cross-env --save-dev# 4. 新建 electron/main.js + preload.js # 5. 修改 package.json 和vite.config.ts # 6. 开发运行 npm run electron# 7. 打包发布 npm run electron:buildz
