1.前言
本文详细介绍如何使用electron将若依框架前后端分离版的前端Vue页面打包为Exe文件，并且包括如何实现应用更新。使用若依基础代码体现不出打包功能，因此我使用开发的文件管理系统，介绍上述过程，具体可以查看我的文章《若依前后端分离版实现文件管理》。虽然没有使用若依基础代码，但是打包过程是完全一样的。本文章完全免费，使用若依版本为3.8.9。打包之前，复制一份前端代码进行，不要在原来前端代码基础上打包，因为exe打包修改的配置会影响原来PC端的功能。
2.安装插件
1.在终端执行下面代码，查看当前镜像库。
npm get registry
2.如果当前镜像不是上面地址，执行下面代码，将镜像设置淘宝镜像。再次执行上面代码，查看镜像库是否正确。
npm config set registry https://registry.npmmirror.com/
3.在终端依次执行下面代码，安装这个5个插件到ruoyi-ui。
npm install electron
npm install electron-devtools-installer
npm install electron-store
npm install vue-cli-plugin-electron-builder
npm install electron-updater
4.如果安装失败，请使用科学上网的方式进行安装，具体如何科学上网，这里就不介绍了。如果使用科学上网的方式还是安装失败，可以在科学上网的前提下依次执行下面代码。此种方式，应该能够解决大部分问题，不行就多尝试几次。如果还是不行，只能自己想办法安装这几个插件了。
vb
`npm install electron --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
npm install electron-devtools-installer --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
npm install electron-store --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
npm install vue-cli-plugin-electron-builder --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
npm install electron-updater --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/`
5.在IDEA终端执行下面代码，进入ruoyi-ui文件夹（如果没有IDEA在cmd界面执行一样。）。
cd ruoyi-ui
5.在IDEA终端执行下面代码，查看vue版本。
vue --version
6.如果提醒" 'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。 "继续在IDEA终端中执行下面代码。先不要关闭窗口，
npm root -g
7.Win + R 输入 sysdm.cpl，按回车或点击"确定"按钮，打开环境变量设置。
8.选择"高级"，点击"环境变量"。
9.选择系统变量下面的Path选项，点击"编辑"按钮。
10.复制第6步的值，不要全部复制，复制到node_global路径即可。比如：我的第6步显示：D:\work\nodejs\node_global\node_modules，我需要复制D:\work\nodejs\node_global。
点击"新建"按钮，将复制的路径，加入到最后。添加完成后，点击"确定"按钮。
11.再次点击"确定"按钮。之后，再此打开环境变量，找到刚才位置，确认下是否保存成功。
12.环境变量重新保存的前提下，关闭IDEA，再次打开。如果使用cmd，请关闭后，再打开。如果执行下面代码，显示版本号了，就代表配置成功了。如果关闭后再打开不生效，请重启下电脑。
vue --version
13.在IDEA终端执行下面代码，会提示选择版本，选择最新版，然后回车。等待添加完成后，打开前端文件，如果再src文件夹下多了个backgroud.js文件，代表添加成功。
vue add electron-builder
如果卡住了，不用关，只要前端成功添加了backgroud.js文件即可。
等待backgroud.js文件添加成功，通过Ctrl+C两次，强制停止IDEA终端。不然后面打包时，会出现异常。
一定不要在vs终端执行上面代码，会报错。
14.打开package.json文件，由于我安装的nodejs版本较高，将electron:build和electron:serve添加以下前缀。并不是所有人都需要添加此配置，如果原来代码，再不添加的前提下可以运行，就不用添加。
SET NODE_OPTIONS=--openssl-legacy-provider &&
3.修改原文件
1.打开router/index.js，将路由模式改为hash。如果不修改，打包后直接无法显示页面。
2.通过Vs的全局搜索功能，1. 将所有文件中的Cookies.get替换为localStorage.getItem，将Cookies.set全部替换为localStorage.setItem，Cookies.remove全部替换为localStorage.removeItem。如果不修改，使用Cookies的地方都报错。比如：点击"登录"按钮后无反应，因为登录页面就使用了Cookies。
-
打开src/layout/components/Navbar文件，设置退出后，跳转到登录页。如果不设置，退出后，显示空白页。
this.$router.push('/login');
4.打开src\utils\request.js文件，修改登录超时页面跳转。导入路由插件，实现路由调转。
import router from '@/router'
router.push('/login');
4.配置Electron
1.打开vue.config.js文件，在module.exports中，增加Electron配置，配置代码如下。下面配置上都有说明，就不一一介绍了，主要介绍下容易出错的配置。
// electron配置
pluginOptions: {
electronBuilder: {
nodeIntegration: false, //禁止 Node.js 直接运行，提升安全性
contextIsolation: true, //使 `preload.js` 安全地暴露 API
enableRemoteModule: false, // 禁止 `remote`，避免被攻击
builderOptions: {
appId: 'com.py', // appid
productName: 'py', // 生产名称
copyright: "Copyright © 2018-2025",
asar: true, //启用 asar 打包，防止文件被篡改
directories: {
output: "dist_electron", //指定打包后的文件夹
buildResources: "src/assets" //资源文件路径（图标等）
},
nsis: {
oneClick: false, // 允许用户自定义安装路径
allowToChangeInstallationDirectory: true, // 允许用户修改安装路径
perMachine: true, // 所有用户都可安装（系统级安装）
allowElevation: true, // 允许以管理员权限运行
createDesktopShortcut: true, // 创建桌面快捷方式
createStartMenuShortcut: true, // 创建开始菜单快捷方式
shortcutName: "若依管理系统", // 自定义快捷方式名称
installerIcon: "src/assets/logo/piaoyi_stall.ico", // 安装程序图标
uninstallerIcon: "src/assets/logo/piaoyi_stall.ico", // 卸载程序图标
installerHeaderIcon: "src/assets/logo/piaoyi_stall.ico", // 安装界面标题图标
},
win: {
// 下方任务栏图标
icon: "src/assets/logo/piaoyi.ico",
target: [
{
target: "nsis", //生成 Windows 安装包
arch: ["ia32", "x64"] // 32 位 & 64 位兼容
}
],
// 安装包文件名
artifactName: "py_${version}.${ext}"
},
publish: [
{
provider: "generic", // 允许手动配置更新服务器
url: "http://localhost:8080/profile/" // 更新服务器地址
}
],
// 额外打包资源，会打包到resources文件夹，使用时加上此文件夹路径
extraResources: [
// 打包应用左上角图标
{
from: "src/assets/logo/piaoyi_stall.ico",
to: "logo/logo.ico",
}
]
}
}
}
注意：
1.上面的所有图标必须要求为.ico格式，并且最小为256*256。icon格式转换后的图片有可能无法识别，导致报错。我使用的wps，如果关于图标报错，一定按照上面要求，如果还是不行，就得换个转换软件了。
2.publish.url为更新文件的地址，需要为一个后端映射的文件夹，我使用了若依文件后端映射文件夹的根路径。需要更新文件时，将打包后的exe文件和latest.yml文件上传到这个文件夹，应用会自动更新。
3.extraResources配置项导出到打包文件，能够和public文件夹下的文件类似，我这将一个icon导出到了打包文件夹。需要注意的是，会将文件导出到resources文件夹下，因此使用文件时，需要加上此文件夹前缀，具体可以看backgroud.js文件中icon配置。
2.打开.env.production文件，将VUE_APP_BASE_API改为后端地址。因为electron自动读取这个文件中的配置，一定不要和vue一样加上访问前缀。真正发布时，后端地址肯定需要映射到外网，就和小程序或者APP的后端类似。
3.打开src\background.js文件，用以下代码替换。一般根据实际情况修改icon即可，如果调试阶段可以win.webContents.openDevTools()代码注释去掉，会显示一个类似于web调试的框。
'use strict'
import { app, protocol, BrowserWindow, Menu, dialog } from 'electron'
import { autoUpdater } from 'electron-updater'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
//手动配置当前环境
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow() {
// 关闭顶部导航菜单栏
Menu.setApplicationMenu(null)
// Create the browser window.
const win = new BrowserWindow({
width: 1000,
height: 800,
// 应用左上角图标
icon: "resources/logo/logo.ico",
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
}
})
// 启动自动更新检查
checkForUpdates();
//打开调试框
// win.webContents.openDevTools()
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
// 自动更新逻辑
function checkForUpdates() {
autoUpdater.autoDownload = false; // 禁止自动下载，让用户手动确认
autoUpdater.checkForUpdates();
// 有新版本可用
autoUpdater.on('update-available', (info) => {
dialog.showMessageBox({
type: 'info',
title: '更新可用',
message: `发现新版本 ${info.version}，是否立即更新？`,
buttons: ['是', '否']
}).then((result) => {
if (result.response === 0) {
autoUpdater.downloadUpdate();
}
});
});
// 更新下载完成
autoUpdater.on('update-downloaded', () => {
dialog.showMessageBox({
type: 'info',
title: '更新完成',
message: '更新下载完成，是否立即安装？',
buttons: ['立即安装', '稍后']
}).then((result) => {
if (result.response === 0) {
autoUpdater.quitAndInstall();
}
});
});
// 更新错误
autoUpdater.on('error', (error) => {
dialog.showErrorBox('更新错误', error == null ? "未知错误" : error.toString());
});
}
4.上面设置了很多东西，就是没有应用版本号。应用版本号对更新很重要，会自动读取package.json文件中的version，可以根据实际情况修改。我这里修改成1.0.0，方便以后的更新测试。
5.复制icon到文件夹，请根据实际情况修改icon相关代码。
5.打包与更新
1.执行下面代码，进行打包。
npm run electron:build
2.以为要成功了，结果插件报错了，只能重新安装下。先要强制结束下2.13步骤中，IDEA终端中的命令，不然会显示electron占用。重新安装下还是不行，直接删除node_modules文件夹下所有内容，并且删除了 package-lock.json文件。然后再执行npm install安装所有插件命令，终于可以打包了。
3.第一次打包需要从github上下载相关依赖，如果速度很慢，可以强制停止了这个程序，然后使用了科学上网的方式，再次打包。以后打包，不删除win-相关的文件夹，就不用使用科学上网的方式进行打包了。通过不断尝试，终于打包成功了，一般出问题就是插件原因，这也是没办法，只能不断下载。
4.将py_1.0.0.exe和latest.yml文件，复制到若依后端映射文件夹根目录下。
5.执行py_1.0.0.exe文件，根据步骤选择安装路径，进行安装。
6.成功启动，登录后，测试功能正常。
文件预览功能也能正常使用，其他功能也能正常，其他功能不一一测试了。需要注意点是web新开网页，在应用中会新打开个窗口。
7.打开package.json文件，修改version为1.0.1，然后重新打包。
8.等待打包成功，将最新打包的exe文件和latest.yml文件，复制到若依后端映射文件夹根目录下。
9.关闭刚才的应用，然后重新打开。会提醒更新消息，点击"是"。
10.点击"立即安装"按钮。
11.自动安装，会显示安装进度，由于截图有点慢，更新完了。
6.总结
electron打包还是比较简单的，只要复制我上面的配置文件，并且按照我的过程修改原文件就能使用。很多坑我都给踩了，超时或退出登录白屏问题等问题，但是那个插件安装容易出错问题，我真的无能为力，大家只能多尝试几次了，要敢于尝试，代码一般不会出问题的。
如果本文章对您有帮助的话，并且条件允许的话，可以给我打赏下。不打赏也没关系，您可以给我点赞支持下，您的支持就是我最大的动力。关注我的小伙伴应该发现了，我写文章过程会非常具体，希望每个小伙伴都能够跟着文章完成操作。我会不定时发布一些关于若依框架、java、Vue、uniapp等方面的内容，如果感兴趣的话，可以关注我。如果您需要前后端分离版的文件预览系统、流程管理系统或其他以上四方面涉及的内容，查看我的主页一定不后悔。