使用electron将vue-cli项目打包成exe的方法
本文介绍如何将Vue CLI构建的前端项目通过Electron打包为Windows可执行文件exe。主要步骤包括配置electron-packager依赖、修改main.js入口指向dist目录下的index.html、调整package.json脚本,以及执行打包命令生成带有指定图标的exe文件。
Electron打包Vue项目概述
如果你已经完成了Vue项目的开发,并希望将其转换为Windows桌面应用程序的exe文件,请继续阅读下文。
首先,你可以下载一个示例demo来了解基本流程。
示例项目结构分析
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
该demo的核心文件主要包括main.js和package.json。
接下来打开main.js文件进行查看。
const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})//创建一个浏览器窗口,可配置宽高
// and load the index.html of the app.
mainWindow.loadFile('index.html')//加载html
// Open the DevTools.
// mainWindow.webContents.openDevTools()//打开调试窗口
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})
同时需要关注package.json的配置。
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",//入口,根据自己的项目修改
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^2.0.0"
}
}
在终端中运行npm start命令。
此时应该能看到窗口正常显示。

确认无误后,现在在自己的Vue项目根目录中安装两个必要的依赖包。
依赖安装与配置
npm install electron --save-dev
npm install electron-packager --save-dev
Electron提供了两种打包工具:electron-packager和electron-builder。虽然官方推荐使用electron-builder,但其配置相对复杂;对于初学者,建议先使用electron-packager。
这里我们选择electron-packager进行演示。
首先,将示例项目中的main.js文件复制一份,并重命名为electron.js。
修改该文件中的加载路径为mainWindow.loadFile('./dist/index.html'),以指向Vue打包后的输出目录。
接着,对你的Vue项目进行常规打包,执行npm run build命令。
打包完成后,将之前重命名的electron.js文件再次复制一份到dist目录下,并修改其中的加载路径为mainWindow.loadFile('index.html')。
随后,修改项目根目录下的package.json文件。
配置内容应如下所示。
打包脚本与执行
"main": "build/electron.js",//入口
"scripts": {
"dev": "node build/dev-server.js",
"start": "npm run dev",
"build": "node build/build.js",
"test": "electron .",
"electron_build": "electron-packager ./dist exeName --platform=win32 --arch=x64 --icon=./assets/img/favicon.ico --overwrite"
},
将package.json文件复制到dist目录下,并相应修改其main字段指向electron.js。
"main": "electron.js",1
此时运行npm test命令即可打开项目窗口进行预览。
最后,运行npm run electron_build命令进行正式打包。注意exe图标必须存在,格式为ico,且exeName参数需根据实际需求配置。
之所以要在dist目录中放入electron.js和package.json,是因为打包工具的内部机制会读取该目录下的index.html及对应的package.json来完成打包过程。
以上便是使用Electron将Vue CLI项目打包为exe文件的完整方法,希望能为大家提供参考,也希望大家多多支持本站。
Vue 3 核心变化解析:Composition API 与响应式系统详解
2026-11-03 21:33:38
viewer.js v1 升级到 v2 需要注意哪些 API 变更
2026-11-03 20:42:00
Vue3 与 React 中怎么封装 hls.js 播放器组件
2026-11-03 11:13:51
Vue.js官网访问慢或打不开怎么办?国内镜像与GitHub备用方案
2026-11-02 09:19:09
利用Axios实现无感知双Token刷新的详细教程
2026-11-01 03:11:12
