Electron vue项目 打包 exe文件

Electron 快速入门 1：从项目创建到打包成 EXE

Electron 允许你用 Web 技术（HTML、CSS、JavaScript）开发跨平台桌面应用。以下是「创建项目 → 本地运行 → 打包为 Windows EXE」的完整流程。

一、创建并初始化项目

1. 新建项目目录并进入
   打开终端，执行命令创建文件夹并进入：

mkdir my-electron-app && cd my-electron-app

2. 初始化 npm 项目
   执行 npm init（加 -y 可快速生成默认配置）：

npm init -y

二、安装 Electron 依赖

将 Electron 作为开发依赖安装到项目：

npm install electron --save-dev

三、配置项目入口与启动命令

1. 调整 package.json

打开 package.json，做两处修改：

• 确保 main 字段指向主进程文件 （如 main.js，若默认是 index.js 需手动改）；
• 在 scripts 中新增 start 命令，用于启动 Electron 应用。

修改后示例：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Electron 入门示例",
  "main": "main.js", // 主进程入口文件
  "scripts": {
    "start": "electron .", // 启动应用的命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "你的名字",
  "license": "MIT",
  "devDependencies": {
    "electron": "^27.0.0" // 实际安装的 Electron 版本
  }
}

2. 创建主进程文件 main.js

在项目根目录新建 main.js，先写测试代码验证启动：

console.log('Hello from Electron 👋');

四、启动 Electron 应用

执行命令启动应用，终端会输出 Hello from Electron 👋：

npm run start

五、编写完整主进程逻辑（加载界面）

替换 main.js 为完整代码 ，让 Electron 启动窗口并加载界面（后续可替换为 Vue/React 打包后的 index.html）：

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

let win; // 全局维护窗口对象，防止被垃圾回收

function createWindow() {
  // 创建浏览器窗口（可自定义宽高，示例为 375×830）
  win = new BrowserWindow({ width: 375, height: 830 });

  // 加载项目内的 index.html（后续可替换为框架打包后的页面）
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, "index.html"),
      protocol: "file:",
      slashes: true,
    })
  );

  // 可选：打开开发者工具（调试用）
  // win.webContents.openDevTools()

  // 窗口关闭时，释放窗口引用
  win.on("closed", () => {
    win = null;
  });
}

// Electron 初始化完成后，创建窗口
app.on("ready", createWindow);

// 所有窗口关闭时，退出应用（macOS 除外，遵循系统交互习惯）
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// macOS 下点击 Dock 图标时，若无窗口则重新创建
app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

补充：创建 index.html（测试界面加载）

在项目根目录新建 index.html，写入简单页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Electron 示例</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
    <p>这是 Electron 加载的页面～</p>
  </body>
</html>

再次执行 npm run start，会看到 Electron 窗口加载出上述 HTML 页面。

六、打包成 Windows EXE 文件

使用 electron-packager 工具将项目打包为 Windows 可执行程序（EXE）。

1. 全局安装 electron-packager

npm install -g electron-packager

2. 执行打包命令

在项目根目录执行以下命令（参数说明：--win 指定 Windows 平台；--out MyApp 指定输出到 MyApp 文件夹；--arch=x64 指定 64 位架构；--electron-version 需与项目中 Electron 版本一致）：

electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 27.0.0 --overwrite --ignore=node_modules

3. 验证打包结果

打包完成后，MyApp 文件夹下会生成 MyApp-win32-x64 目录，进入该目录即可找到 MyApp.exe，双击即可运行 Electron 应用。

至此，从项目创建、本地调试到打包为 EXE 的流程就全部完成啦～