若依前后端分离版使用Electron打包前端Vue为Exe文件
1.媒介本文具体介绍怎样使用electron将若依框架前后端分离版的前端Vue页面打包为Exe文件，并且包罗怎样实现应用更新。使用若依基础代码体现不出打包功能，因此我使用开发的文件管理系统，介绍上述过程，具体可以查看我的文章《若依前后端分离版实现文件管理》。固然没有使用若依基础代码，但是打包过程是完全一样的。本文章完全免费，使用若依版本为3.8.9。打包之前，复制一份前端代码进行，不要在原来前端代码基础上打包，因为exe打包修改的设置会影响原来PC端的功能。
2.安装插件
1.在终端执行下面代码，查看当前镜像库。
npm get registry
https://i-blog.csdnimg.cn/img_convert/6571a329d2f9484353fd9d1decca8250.png
2.如果当前镜像不是上面地点，执行下面代码，将镜像设置淘宝镜像。再次执行上面代码，查看镜像库是否正确。
npm config set registry https://registry.npmmirror.com/
https://i-blog.csdnimg.cn/img_convert/e248432da9cb835b7a4d1dbf08f02aee.png
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/
https://i-blog.csdnimg.cn/img_convert/f1448bd3cc04369106914052c6604b52.png
https://i-blog.csdnimg.cn/img_convert/8fa8d9d801b48e559e09847a0812ddba.png
5.在IDEA终端执行下面代码，进入ruoyi-ui文件夹（如果没有IDEA在cmd界面执行一样。）。
cd ruoyi-ui
https://i-blog.csdnimg.cn/img_convert/dc12d1a5e81004cfb435a04803ed20d4.png
5.在IDEA终端执行下面代码，查看vue版本。
vue --version
https://i-blog.csdnimg.cn/img_convert/b44c1f1208be610c97994aa4eff998e2.png
6.如果提醒“ 'vue' 不是内部或外部命令，也不是可运行的程序或批处置惩罚文件。 ”继承在IDEA终端中执行下面代码。先不要关闭窗口，
npm root -g
https://i-blog.csdnimg.cn/img_convert/49511f71a305943ca2c33b9eb6191645.png
7.Win + R 输入 sysdm.cpl，按回车或点击“确定”按钮，打开环境变量设置。
https://i-blog.csdnimg.cn/img_convert/ef6ca04e6fef27973902c7e82c746cf1.png
8.选择“高级”，点击“环境变量”。
https://i-blog.csdnimg.cn/img_convert/f0aa6556a1bce11a00daac5ba86add47.png
9.选择系统变量下面的Path选项，点击“编辑”按钮。
https://i-blog.csdnimg.cn/img_convert/334761c828ce2912a9af24ef99c7dc9d.png
10.复制第6步的值，不要全部复制，复制到node_global路径即可。比如：我的第6步表现：D:\work\nodejs\node_global\node_modules，我需要复制D:\work\nodejs\node_global。
点击“新建”按钮，将复制的路径，加入到最后。添加完成后，点击“确定”按钮。
https://i-blog.csdnimg.cn/img_convert/2ff4810c1c171d3a89bf6d302806e02d.png
11.再次点击“确定”按钮。之后，再此打开环境变量，找到刚才位置，确认下是否保存乐成。
https://i-blog.csdnimg.cn/img_convert/88bf488ae05208e228a89776871c676a.png
12.环境变量重新保存的条件下，关闭IDEA，再次打开。如果使用cmd，请关闭后，再打开。如果执行下面代码，表现版本号了，就代表设置乐成了。如果关闭后再打开不见效，请重启下电脑。
vue --version
https://i-blog.csdnimg.cn/img_convert/eb3a7acf6b1d1d3e56e405804d70102c.png
13.在IDEA终端执行下面代码，会提示选择版本，选择最新版，然后回车。等候添加完成后，打开前端文件，如果再src文件夹下多了个backgroud.js文件，代表添加乐成。
vue add electron-builder
https://i-blog.csdnimg.cn/img_convert/b41a5ebe990309c56a93969f22dd897f.png
如果卡住了，不用关，只要前端乐成添加了backgroud.js文件即可。
https://i-blog.csdnimg.cn/img_convert/8324a8381499f76f9317090aad4ea473.png
等候backgroud.js文件添加乐成，通过Ctrl+C两次，逼迫克制IDEA终端。不然反面打包时，会出现异常。
https://i-blog.csdnimg.cn/img_convert/04b51d101ddcd4d746b32c17f75001b2.png
https://i-blog.csdnimg.cn/img_convert/b31dfb042e4fd145a59be8c58de8378e.png
一定不要在vs终端执行上面代码，会报错。
https://i-blog.csdnimg.cn/img_convert/6eeb4d67ed78e6a943ff67d09faa8b3c.png
14.打开package.json文件，由于我安装的nodejs版本较高，将electron:build和electron:serve添加以下前缀。并不是所有人都需要添加此设置，如果原来代码，再不添加的条件下可以运行，就不用添加。
SET NODE_OPTIONS=--openssl-legacy-provider &&
https://i-blog.csdnimg.cn/img_convert/4d5513586a51a14b4420aebb1724f8ef.png
3.修改原文件
1.打开router/index.js，将路由模式改为hash。如果不修改，打包后直接无法表现页面。
https://i-blog.csdnimg.cn/img_convert/56f173068edefa9ddd1e423dbac7b5ef.png
2.通过Vs的全局搜刮功能，1. 将所有文件中的Cookies.get更换为localStorage.getItem，将Cookies.set全部更换为localStorage.setItem，Cookies.remove全部更换为localStorage.removeItem。如果不修改，使用Cookies的地方都报错。比如：点击“登录”按钮后无反应，因为登录页面就使用了Cookies。
https://i-blog.csdnimg.cn/img_convert/efa8afa184c5a226deb3f43d4d5fa283.png
https://i-blog.csdnimg.cn/img_convert/7b4ba04605eef826c16bfe436b5f4ee9.png
https://i-blog.csdnimg.cn/img_convert/8a39e216f547bdaf00dd6faa0fde0815.png
https://i-blog.csdnimg.cn/img_convert/aca619736348a3dc0940099555c844c5.png
https://i-blog.csdnimg.cn/img_convert/a317fa620fd3f94e047f36b0bcdb925b.png
https://i-blog.csdnimg.cn/img_convert/f4705646a176bdca57321a30aa069ca7.png
3. 打开src/layout/components/Navbar文件，设置退出后，跳转到登录页。如果不设置，退出后，表现空白页。
this.$router.push('/login');
https://i-blog.csdnimg.cn/img_convert/2b02f8ca9e32a95557f87d17dc2fb19a.png
4.打开src\utils\request.js文件，修改登录超时页面跳转。导入路由插件，实现路由调转。
import router from '@/router'
router.push('/login');
https://i-blog.csdnimg.cn/img_convert/f68dcf23677496c5d419566bf45d402a.png
https://i-blog.csdnimg.cn/img_convert/b8d7ee788e6a37a3e2828f7ab4e02337.png
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",
}
]
}
}
}
https://i-blog.csdnimg.cn/img_convert/5a544b1cb1f21511f1ed03398b1e51ce.png
https://i-blog.csdnimg.cn/img_convert/bba10300cbfc29e71f69617ce3cbfba3.png
注意：
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的后端类似。
https://i-blog.csdnimg.cn/img_convert/d77a1f62b2c33a5b2d11b18b42764e27.png
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());
});
}
https://i-blog.csdnimg.cn/img_convert/6cac8bf4a870dc12b03d668b88761300.png
4.上面设置了很多东西，就是没有应用版本号。应用版本号对更新很紧张，会自动读取package.json文件中的version，可以根据现实环境修改。我这里修改成1.0.0，方便以后的更新测试。
https://i-blog.csdnimg.cn/img_convert/2b512b4f004f6ec683cf34ce643d6b8e.png
5.复制icon到文件夹，请根据现实环境修改icon干系代码。
https://i-blog.csdnimg.cn/img_convert/df7ed086bdf3d0b41312f7c005ea4acf.png
https://i-blog.csdnimg.cn/img_convert/a5e1addb7f56a81628f3753f7ca5e1f6.png
https://i-blog.csdnimg.cn/img_convert/a99ed86968e80867a028287e64d88f52.png
5.打包与更新
1.执行下面代码，进行打包。
npm run electron:build
https://i-blog.csdnimg.cn/img_convert/2e69eb17887c60358d2b90c43f097396.png
2.以为要乐成了，效果插件报错了，只能重新安装下。先要逼迫结束下2.13步调中，IDEA终端中的命令，不然会表现electron占用。重新安装下还是不行，直接删除node_modules文件夹下所有内容，并且删除了 package-lock.json文件。然后再执行npm install安装所有插件命令，终于可以打包了。
https://i-blog.csdnimg.cn/img_convert/75f7ab2bbd032b34c5ce78844f1dbfca.png
https://i-blog.csdnimg.cn/img_convert/92dfd4c4bed479d8af0f3137b28a46a2.png
3.第一次打包需要从github上下载干系依靠，如果速度很慢，可以逼迫克制了这个程序，然后使用了科学上网的方式，再次打包。以后打包，不删除win-干系的文件夹，就不用使用科学上网的方式进行打包了。通过不断尝试，终于打包乐成了，一般出题目就是插件缘故原由，这也是没办法，只能不断下载。
https://i-blog.csdnimg.cn/img_convert/57943d4d9e21777ea027c839d102d47d.png
4.将py_1.0.0.exe和latest.yml文件，复制到若依后端映射文件夹根目录下。
https://i-blog.csdnimg.cn/img_convert/ff4744c6aea70b0c4f75cbab37b362ef.png
https://i-blog.csdnimg.cn/img_convert/0fe4ffee9400d283cc690a20616f0f7f.png
5.执行py_1.0.0.exe文件，根据步调选择安装路径，进行安装。
https://i-blog.csdnimg.cn/img_convert/d12a30a268ebc76c6425e5b16f46cfbd.png
https://i-blog.csdnimg.cn/img_convert/079e6d1d9d97e8bd3fe028447719f0a0.png
https://i-blog.csdnimg.cn/img_convert/e4d4e17b359e015de73f05f7b9b2092f.png
6.乐成启动，登录后，测试功能正常。
https://i-blog.csdnimg.cn/img_convert/aa60acdebdad7531fe3c34bd57107786.png
文件预览功能也能正常使用，其他功能也能正常，其他功能不一一测试了。需要注意点是web新开网页，在应用中会新打开个窗口。
https://i-blog.csdnimg.cn/img_convert/35c408db4333d2bc6317f3a3ebed529e.png
7.打开package.json文件，修改version为1.0.1，然后重新打包。
https://i-blog.csdnimg.cn/img_convert/d94a2ab5062aa1efb8493b30537eb05b.png
https://i-blog.csdnimg.cn/img_convert/caaf52ffc86c28bb62aaf006805eccb5.png
8.等候打包乐成，将最新打包的exe文件和latest.yml文件，复制到若依后端映射文件夹根目录下。
https://i-blog.csdnimg.cn/img_convert/8798187bebc25c7de383f2f39b40be36.png
https://i-blog.csdnimg.cn/img_convert/cb6b89f9eb31d3f7ebe4284fd06c5524.png
9.关闭刚才的应用，然后重新打开。会提醒更新消息，点击“是”。
https://i-blog.csdnimg.cn/img_convert/d9331a740a154e13f2e28213720409c4.png
10.点击“立即安装”按钮。
https://i-blog.csdnimg.cn/img_convert/49c2b9ceb6e721d434a4843209ef48f7.png
11.自动安装，会表现安装进度，由于截图有点慢，更新完了。
https://i-blog.csdnimg.cn/img_convert/be70623da88b4c65267693900f0c14ce.png
6.总结
electron打包还是比较简朴的，只要复制我上面的设置文件，并且按照我的过程修改原文件就能使用。很多坑我都给踩了，超时或退出登录白屏题目等题目，但是那个插件安装容易堕落题目，我真的无能为力，各人只能多尝试几次了，要敢于尝试，代码一般不会出题目的。
如果本文章对您有资助的话，并且条件允许的话，可以给我打赏下。不打赏也没关系，您可以给我点赞支持下，您的支持就是我最大的动力。关注我的小伙伴应该发现了，我写文章过程会非常具体，希望每个小伙伴都能够跟着文章完成操作。我会不定时发布一些关于若依框架、java、Vue、uniapp等方面的内容，如果感兴趣的话，可以关注我。如果您需要前后端分离版的文件预览系统、流程管理系统或其他以上四方面涉及的内容，查看我的主页一定不后悔。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]