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

VUE+Electron从0开始搭建开发环境

🧰 一、安装环境

1️⃣ 安装 Node.js 20 LTS

2️⃣ （推荐）设置国内 npm 镜像：

🧱 二、创建 Vue 3 + Vite 项目

⚡️ 三、集成 Electron

1️⃣ 创建 Electron 启动文件

2️⃣ 创建 electron/preload.js

3️⃣ 修改 package.json

🧪 四、开发模式运行

📦 五、打包发布

🖥️ 六、最终目录结构示例

💡 七、可选优化选项

2️⃣ 创建 `electron/preload.js`

3️⃣ 修改 `package.json`