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

1.媒介

本文具体介绍怎样使用electron将若依框架前后端分离版的前端Vue页面打包为Exe文件，并且包罗怎样实现应用更新。使用若依基础代码体现不出打包功能，因此我使用开发的文件管理系统，介绍上述过程，具体可以查看我的文章《若依前后端分离版实现文件管理》。固然没有使用若依基础代码，但是打包过程是完全一样的。本文章完全免费，使用若依版本为3.8.9。打包之前，复制一份前端代码进行，不要在原来前端代码基础上打包，因为exe打包修改的设置会影响原来PC端的功能。
2.安装插件

1.在终端执行下面代码，查看当前镜像库。

1. npm get registry

复制代码

2.如果当前镜像不是上面地点，执行下面代码，将镜像设置淘宝镜像。再次执行上面代码，查看镜像库是否正确。

1. npm config set registry https://registry.npmmirror.com/

复制代码

3.在终端依次执行下面代码，安装这个5个插件到ruoyi-ui。

1. npm install electron
2. npm install electron-devtools-installer
3. npm install electron-store
4. npm install vue-cli-plugin-electron-builder
5. npm install electron-updater

复制代码

4.如果安装失败，请使用科学上网的方式进行安装，具体怎样科学上网，这里就不介绍了。如果使用科学上网的方式还是安装失败，可以在科学上网的条件下依次执行下面代码。此种方式，应该能够解决大部门题目，不行就多尝试几次。如果还是不行，只能本身想办法安装这几个插件了。

2. npm install electron --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
3. npm install electron-devtools-installer --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
4. npm install electron-store --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
5. npm install vue-cli-plugin-electron-builder --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/
6. npm install electron-updater --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors/electron/

复制代码

5.在IDEA终端执行下面代码，进入ruoyi-ui文件夹（如果没有IDEA在cmd界面执行一样。）。

1. cd ruoyi-ui

复制代码

5.在IDEA终端执行下面代码，查看vue版本。

1. vue --version

复制代码

6.如果提醒“ 'vue' 不是内部或外部命令，也不是可运行的程序或批处置惩罚文件。 ”继承在IDEA终端中执行下面代码。先不要关闭窗口，

1. 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，请关闭后，再打开。如果执行下面代码，表现版本号了，就代表设置乐成了。如果关闭后再打开不见效，请重启下电脑。

1. vue --version

复制代码

13.在IDEA终端执行下面代码，会提示选择版本，选择最新版，然后回车。等候添加完成后，打开前端文件，如果再src文件夹下多了个backgroud.js文件，代表添加乐成。

1. vue add electron-builder

复制代码

如果卡住了，不用关，只要前端乐成添加了backgroud.js文件即可。

等候backgroud.js文件添加乐成，通过Ctrl+C两次，逼迫克制IDEA终端。不然反面打包时，会出现异常。

一定不要在vs终端执行上面代码，会报错。

14.打开package.json文件，由于我安装的nodejs版本较高，将electron:build和electron:serve添加以下前缀。并不是所有人都需要添加此设置，如果原来代码，再不添加的条件下可以运行，就不用添加。

1. 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文件，设置退出后，跳转到登录页。如果不设置，退出后，表现空白页。

1. this.$router.push('/login');

复制代码

4.打开src\utils\request.js文件，修改登录超时页面跳转。导入路由插件，实现路由调转。

1. import router from '@/router'
2. router.push('/login');

复制代码

4.设置Electron

1.打开vue.config.js文件，在module.exports中，增长Electron设置，设置代码如下。下面设置上都有阐明，就不一一介绍了，主要介绍下容易堕落的设置。

1. // electron配置
2.   pluginOptions: {
3.     electronBuilder: {
4.       nodeIntegration: false, //禁止 Node.js 直接运行，提升安全性
5.       contextIsolation: true, //使 `preload.js` 安全地暴露 API
6.       enableRemoteModule: false, // 禁止 `remote`，避免被攻击
8.       builderOptions: {
9.         appId: 'com.py',  // appid
10.         productName: 'py', // 生产名称
11.         copyright: "Copyright © 2018-2025",
12.         asar: true, //启用 asar 打包，防止文件被篡改
13.         directories: {
14.           output: "dist_electron", //指定打包后的文件夹
15.           buildResources: "src/assets" //资源文件路径（图标等）
16.         },
18.         nsis: {
19.           oneClick: false, // 允许用户自定义安装路径
20.           allowToChangeInstallationDirectory: true, // 允许用户修改安装路径
21.           perMachine: true, // 所有用户都可安装（系统级安装）
22.           allowElevation: true, // 允许以管理员权限运行
23.           createDesktopShortcut: true, // 创建桌面快捷方式
24.           createStartMenuShortcut: true, // 创建开始菜单快捷方式
25.           shortcutName: "若依管理系统", // 自定义快捷方式名称
26.           installerIcon: "src/assets/logo/piaoyi_stall.ico", // 安装程序图标
27.           uninstallerIcon: "src/assets/logo/piaoyi_stall.ico", // 卸载程序图标
28.           installerHeaderIcon: "src/assets/logo/piaoyi_stall.ico", // 安装界面标题图标
29.         },
31.         win: {
32.           // 下方任务栏图标
33.           icon: "src/assets/logo/piaoyi.ico",
34.           target: [
35.             {
36.               target: "nsis", //生成 Windows 安装包
37.               arch: ["ia32", "x64"] // 32 位 & 64 位兼容
38.             }
39.           ],
40.           // 安装包文件名
41.           artifactName: "py_${version}.${ext}"
42.         },
44.         publish: [
45.           {
46.             provider: "generic", // 允许手动配置更新服务器
47.             url: "http://localhost:8080/profile/" // 更新服务器地址
48.           }
49.         ],
50.          // 额外打包资源，会打包到resources文件夹，使用时加上此文件夹路径
51.          extraResources: [
52.           // 打包应用左上角图标
53.           {
54.             from: "src/assets/logo/piaoyi_stall.ico",
55.             to: "logo/logo.ico",
56.           }
57.         ]
58.       }
59.     }
60.   }

复制代码

注意：
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调试的框。

1. 'use strict'
3. import { app, protocol, BrowserWindow, Menu, dialog } from 'electron'
4. import { autoUpdater } from 'electron-updater'
5. import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
6. import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
7. //手动配置当前环境
8. const isDevelopment = process.env.NODE_ENV !== 'production'
10. // Scheme must be registered before the app is ready
11. protocol.registerSchemesAsPrivileged([
12.   { scheme: 'app', privileges: { secure: true, standard: true } }
13. ])
15. async function createWindow() {
16.   // 关闭顶部导航菜单栏
17.   Menu.setApplicationMenu(null)
18.   // Create the browser window.
19.   const win = new BrowserWindow({
20.     width: 1000,
21.     height: 800,
22.     // 应用左上角图标
23.     icon: "resources/logo/logo.ico",
24.     webPreferences: {
26.       // Use pluginOptions.nodeIntegration, leave this alone
27.       // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
28.       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
29.       contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
30.     }
31.   })
33.   // 启动自动更新检查
34.   checkForUpdates();
36.   //打开调试框
37.   // win.webContents.openDevTools()
39.   if (process.env.WEBPACK_DEV_SERVER_URL) {
40.     // Load the url of the dev server if in development mode
41.     await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
42.     if (!process.env.IS_TEST) win.webContents.openDevTools()
43.   } else {
44.     createProtocol('app')
45.     // Load the index.html when not in development
46.     win.loadURL('app://./index.html')
47.   }
48. }
50. // Quit when all windows are closed.
51. app.on('window-all-closed', () => {
52.   // On macOS it is common for applications and their menu bar
53.   // to stay active until the user quits explicitly with Cmd + Q
54.   if (process.platform !== 'darwin') {
55.     app.quit()
56.   }
57. })
59. app.on('activate', () => {
60.   // On macOS it's common to re-create a window in the app when the
61.   // dock icon is clicked and there are no other windows open.
62.   if (BrowserWindow.getAllWindows().length === 0) createWindow()
63. })
65. // This method will be called when Electron has finished
66. // initialization and is ready to create browser windows.
67. // Some APIs can only be used after this event occurs.
68. app.on('ready', async () => {
69.   if (isDevelopment && !process.env.IS_TEST) {
70.     // Install Vue Devtools
71.     try {
72.       await installExtension(VUEJS_DEVTOOLS)
73.     } catch (e) {
74.       console.error('Vue Devtools failed to install:', e.toString())
75.     }
76.   }
77.   createWindow()
78. })
80. // Exit cleanly on request from parent process in development mode.
81. if (isDevelopment) {
82.   if (process.platform === 'win32') {
83.     process.on('message', (data) => {
84.       if (data === 'graceful-exit') {
85.         app.quit()
86.       }
87.     })
88.   } else {
89.     process.on('SIGTERM', () => {
90.       app.quit()
91.     })
92.   }
93. }
95. // 自动更新逻辑
96. function checkForUpdates() {
97.   autoUpdater.autoDownload = false; // 禁止自动下载，让用户手动确认
98.   autoUpdater.checkForUpdates();
100.   // 有新版本可用
101.   autoUpdater.on('update-available', (info) => {
102.     dialog.showMessageBox({
103.       type: 'info',
104.       title: '更新可用',
105.       message: `发现新版本 ${info.version}，是否立即更新？`,
106.       buttons: ['是', '否']
107.     }).then((result) => {
108.       if (result.response === 0) {
109.         autoUpdater.downloadUpdate();
110.       }
111.     });
112.   });
114.   // 更新下载完成
115.   autoUpdater.on('update-downloaded', () => {
116.     dialog.showMessageBox({
117.       type: 'info',
118.       title: '更新完成',
119.       message: '更新下载完成，是否立即安装？',
120.       buttons: ['立即安装', '稍后']
121.     }).then((result) => {
122.       if (result.response === 0) {
123.         autoUpdater.quitAndInstall();
124.       }
125.     });
126.   });
128.   // 更新错误
129.   autoUpdater.on('error', (error) => {
130.     dialog.showErrorBox('更新错误', error == null ? "未知错误" : error.toString());
131.   });
132. }

复制代码

4.上面设置了很多东西，就是没有应用版本号。应用版本号对更新很紧张，会自动读取package.json文件中的version，可以根据现实环境修改。我这里修改成1.0.0，方便以后的更新测试。

5.复制icon到文件夹，请根据现实环境修改icon干系代码。

5.打包与更新

1.执行下面代码，进行打包。

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等方面的内容，如果感兴趣的话，可以关注我。如果您需要前后端分离版的文件预览系统、流程管理系统或其他以上四方面涉及的内容，查看我的主页一定不后悔。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。