使用electron将vue-cli项目打包成exe的方法

作者:青山有信时间:2026-10-22 18:04:56浏览:380

本文介绍如何将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命令。

此时应该能看到窗口正常显示。

Electron打包Vue项目概述

确认无误后,现在在自己的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文件的完整方法,希望能为大家提供参考,也希望大家多多支持本站。

作者最新文章