Electron vue项目 打包 exe文件
Electron 快速入门 1：从项目创建到打包成 EXE
Electron 允许你用 Web 技术（HTML、CSS、JavaScript）开发跨平台桌面应用。以下是「创建项目 → 本地运行 → 打包为 Windows EXE」的完整流程。
一、创建并初始化项目
- 新建项目目录并进入
打开终端，执行命令创建文件夹并进入：
mkdir my-electron-app && cd my-electron-app
- 初始化 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 的流程就全部完成啦～