若依前后端分离版使用Electron打包前端Vue为Exe文件

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.如果安装失败，请使用科学上网的方式进行安装，具体如何科学上网，这里就不介绍了。如果使用科学上网的方式还是安装失败，可以在科学上网的前提下依次执行下面代码。此种方式，应该能够解决大部分问题，不行就多尝试几次。如果还是不行，只能自己想办法安装这几个插件了。


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。

3. 打开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` 安全地暴露 APIenableRemoteModule: false, // 禁止 `remote`，避免被攻击builderOptions: {appId: 'com.py',  // appidproductName: '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 infonodeIntegration: 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 modeawait 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 developmentwin.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 + Qif (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 Devtoolstry {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等方面的内容，如果感兴趣的话，可以关注我。如果您需要前后端分离版的文件预览系统、流程管理系统或其他以上四方面涉及的内容，查看我的主页一定不后悔。