Electron 与 Vue 工程集成

🎯 引言

前两篇我们先用简单页面理解 Electron 的结构。本篇把页面换成 Vue，让后面的 IPC、文件操作和桌面交互都建立在更接近真实项目的基础上。

学完本篇，你将能够：

• 说清 Electron 和 Vue 分别负责什么。
• 在开发环境加载 Vite 页面，在生产环境加载构建后的文件。
• 处理开发地址和生产路径的差异。
• 为后续 preload 接口预留清晰的位置。

🧱 Electron 和 Vue 如何分工

Vue 负责渲染进程里的页面，Electron 负责窗口、应用生命周期和系统能力。可以把它们理解成两层：Vue 是“窗口里的界面”，Electron 是“管理窗口的桌面外壳”。

Electron 主进程
    └── BrowserWindow
          └── Vue 页面（渲染进程）
                └── preload 提供的有限接口

Vue 页面不应该因为接入 Electron，就直接导入 fs、dialog 等 Node.js 或 Electron 模块。页面需要系统能力时，仍然通过 preload 和 IPC 请求主进程完成。

🧰 准备 Vue 项目

本篇示例使用 Node.js 24.x LTS、Vue 3.5.x、Vite 6.x 和 Electron 44.0.0。如果你已有 Vue 项目，只需要确认它能够执行 npm run dev 和 npm run build。

创建一个 Vue 项目：

npm create vite@latest electron-vue-course -- --template vue
cd electron-vue-course
npm install
npm install --save-dev electron@44.0.0

在 package.json 中添加 Electron 入口和启动命令：

{
    "main": "electron/main.js",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "electron": "electron ."
    }
}

🛠 开发环境加载 Vite 页面

先在项目根目录新建 electron/main.js：

const { app, BrowserWindow } = require('electron/main');

const VITE_DEV_SERVER_URL = 'http://localhost:5173';

function createWindow() {
    const win = new BrowserWindow({
        width: 960,
        height: 640,
    });

    win.loadURL(VITE_DEV_SERVER_URL);
}

app.whenReady().then(() => {
    createWindow();
});

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

先启动 Vite，再启动 Electron：

npm run dev
npm run electron

此时 Electron 窗口显示的就是 Vue 页面。修改 src/App.vue 后，Vite 会更新页面，Electron 窗口不需要重新打包。

📦 生产环境加载构建文件

开发环境使用 loadURL 加载 Vite 服务器，生产环境则应该加载 dist/index.html。可以用环境变量区分两种情况：

const { app, BrowserWindow } = require('electron/main');
const path = require('node:path');

function createWindow() {
    const win = new BrowserWindow({
        width: 960,
        height: 640,
    });

    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL);
        return;
    }

    win.loadFile(path.join(__dirname, '../dist/index.html'));
}

这里的重点不是记住某个固定路径，而是明确两种加载方式：开发时连接服务器，构建后读取本地文件。后续使用 Forge 或其他工具打包时，还要根据最终目录结构检查 dist 是否被正确复制。

🧾 小节总结

• Vue 负责渲染进程中的页面，Electron 负责桌面窗口和系统能力。
• 开发环境通常用 loadURL 加载 Vite 服务器。
• 生产环境通常用 loadFile 加载构建后的 HTML。
• 页面不能因为使用 Vue 就直接访问 Node.js 或 Electron 模块。
• preload 仍然是页面调用桌面能力的入口。

❓ 知识问答

Q1：为什么不一开始就用 Vue？

A：入门篇先用最小 HTML 讲清 Electron 的运行方式，减少同时学习两个工具的负担。本篇再接入 Vue，后面的示例就能使用真实前端项目结构。

Q2：开发环境和生产环境为什么使用不同的加载方法？

A：开发环境需要 Vite 提供热更新，生产环境没有开发服务器，所以要读取构建后的本地文件。

Q3：Vue 组件里可以直接导入 electron 吗？

A：不建议。页面只通过 preload 暴露的用途明确的方法调用系统能力，具体通信方式下一篇会详细说明。

🧪 小练习

练习一：修改 src/App.vue，把页面标题改成“我的第一个 Vue 桌面应用”。

练习二：给 BrowserWindow 添加 title 配置，并观察窗口标题的变化：

const win = new BrowserWindow({
    // 请在这里编写代码
});

🎉 现在你已经把 Vue 页面放进 Electron 窗口了。下一篇我们会把开发环境和生产环境的窗口生命周期补完整。