环境：
node: v22.11.0
npm: 10.9.0
vue: 3.5.13

一、开发环境配置

1. 项目初始化

# 1. 使用 Vue CLI 创建 Vue 3 项目
vue create my-electron-app
# 选择 Vue 3 模板和所需配置（如 Babel、Router 等）

# 2. 进入项目目录并安装 Electron
cd my-electron-app
npm install electron electron-builder --save-dev
npm install wait-on concurrently --save-dev  # 用于开发模式

2. 项目结构

my-electron-app/
├── src/                 # Vue 3 源码
├── electron/            # Electron 主进程代码
│   ├── main.js         # 主进程入口
│   └── preload.js      # 预加载脚本（安全通信）
├── public/             # 静态资源
├── vue.config.js       # Vue 配置
└── package.json

3. 主进程配置 (electron/main.js)

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"), // 预加载脚本
      contextIsolation: true, // 启用上下文隔离
      nodeIntegration: false, // 禁用 Node.js 集成（安全）
    },
  });
  // 开发模式加载 Vue 开发服务器，生产模式加载打包文件
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:8080');
    win.webContents.openDevTools();
  } else {
    win.loadFile(path.join(__dirname, '../dist/index.html'));
  }

  // 监听vue渲染进程发送过来的消息
  ipcMain.on("message-from-vue", (event, data) => {
    console.log("收到渲染进程消息:", data); // 会在终端显示该log
    event.reply("reply-to-renderer", "主进程已收到消息！" + data); // 向渲染进程发送信息
  });
}

app.whenReady().then(createWindow);
app.on("window-all-closed", () => process.platform !== "darwin" && app.quit());

4. 预加载脚本 (electron/preload.js)

const { contextBridge, ipcRenderer } = require("electron");

// 暴露安全的 API 给渲染进程
contextBridge.exposeInMainWorld("electronAPI", {
  send: (channel, data) => {
    ipcRenderer.send(channel, data);
    console.log(`process.env.NODE_ENV===》`, process.env.NODE_ENV);
  },
  on: (channel, callback) =>
    ipcRenderer.on(channel, (event, ...args) => callback(...args)),
  node_env: process.env,
});
// 监听主进程发过来的回复信息
ipcRenderer.on("reply-to-renderer", (event, data) => {
  console.log("收到主进程回复:", data);
});

5. Vue 配置 (vue.config.js)

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production'? './': '/',//编译出来的文件使用相对路径可直接浏览器打开渲染，否则需要放在一个http服务器中解析
  outputDir:"dist",//打包输出目录
  assetsDir:"static"//静态资源存放目录
});

6. 脚本配置 (package.json)

注意icon必要，并且需要大小为 256 x 256(像素)

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "private": true,
  "main": "./electron/main.js",  // 添加项
  "icon": "./icon.png", // 添加项
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:serve": "cross-env NODE_ENV=development concurrently \"npm run serve\" \"wait-on http://localhost:8080 && electron .\"", // 添加项
    "electron:build": "cross-env NODE_ENV=production npm run build && electron-builder" // 添加项
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "concurrently": "^9.1.2",
    "cross-env": "^7.0.3", // 添加项
    "electron": "^34.1.1",
    "electron-builder": "^25.1.8",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "typescript": "~4.5.5",
    "wait-on": "^8.0.2"
  },
  "build": { // 添加项
    "appId": "com.example.myapp",
    "productName": "MyElectronApp",
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "output": "dist_electron"
    },
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

二、开发模式

Windows系统使用【ctrl+shift+i】开启开发模式

1. 启动开发服务器

npm run electron:serve

2. 进程间通信示例

<template>
  <div>
    <button @click="handleSend">send</button>
    {{ window?.electronAPI?.myTitle }}
  </div>
</template>

<script setup lang="ts">
// preload.js暴露过electronAPI的window方法
const handleSend = () => {
  window?.electronAPI?.send("message-from-vue", "Hello Electron!22");
  console.log(` window?.electronAPI?.myTitle`, window?.electronAPI);
};
</script>

三、生产环境打包

注意shell终端需要使用管理员权限

1. 打包命令

npm run electron:build

• 输出目录：dist_electron。

• 生成文件：

  • Windows: .exe 安装包，
    exe文件路劲：my-electron-app/dist_electron/win-unpacked/MyElectronApp.exe
    安装包路劲：my-electron-app/dist_electron/MyElectronApp Setup 0.1.0.exe
  • macOS: .dmg 镜像。
  • Linux: .AppImage 文件。