集成 Electron 实现桌面应用程序
# 集成 Electron 实现桌面应用程序的详细步骤
为了将 RuoYi 管理系统集成到桌面应用程序中,可以使用 Electron 框架。
# 1. 修改 package.json
文件,加入相关依赖和配置
在项目的 package.json
文件中添加与 Electron 相关的依赖和配置。
{
"name": "ruoyi",
"version": "3.8.6",
"description": "若依管理系统",
"author": "若依",
"license": "MIT",
"main": "background.js",
"scripts": {
"electron:serve": "vue-cli-service electron:serve",
"electron:build": "vue-cli-service electron:build",
"electron:build:win32": "vue-cli-service electron:build --win --ia32"
},
"dependencies": {
"electron-devtools-installer": "3.2.0",
"electron-store": "8.1.0",
"vue-cli-plugin-electron-builder": "2.1.1"
},
"devDependencies": {
"electron": "26.2.0"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
在 scripts
中添加了三个命令,用于启动和构建 Electron 应用程序。
# 2. 配置后端接口地址
在 ruoyi-ui/.env.production
文件中修改 VUE_APP_BASE_API
属性,指向你实际的后端接口地址。
VUE_APP_BASE_API = 'https://vue.ruoyi.vip/prod-api'
1
# 3. 新建 background.js
文件
在 ruoyi-ui/src
目录下新建 background.js
文件,用于 Electron 的主进程控制。
'use strict'
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
const additionalData = { myKey: 'myValue' }
let myWindow = null
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
}
})
if (process.env.WEBPACK_DEV_SERVER_URL) {
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
win.loadURL('app://./index.html')
}
}
const gotTheLock = app.requestSingleInstanceLock(additionalData)
if (!gotTheLock) {
app.quit()
} else {
app.on('second-instance', () => {
if (myWindow) {
if (myWindow.isMinimized()) myWindow.restore()
myWindow.focus()
}
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
try {
await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
这个文件是 Electron 的主进程代码,负责创建窗口和加载应用程序。
# 4. 调整部分代码以支持 Electron 应用
修改
Navbar.vue
和request.js
中的代码:将
location.href = '/index'
修改为this.$router.push('/login')
,以避免跳转问题。this.$store.dispatch('LogOut').then(() => { this.$router.push('/login'); })
1
2
3修改
router/index.js
:将
mode: 'history'
修改为mode: 'hash'
,以确保 Electron 应用中的路由工作正常。export default new Router({ mode: 'hash', ... })
1
2
3
4
# 5. 将项目中的 cookie
替换为 localStorage
在项目中,如果有使用 cookie
进行数据存储的地方,建议替换为 localStorage
,以确保在桌面应用中数据能够正确存储和读取。
# 6. 安装依赖
在命令行中运行以下命令,安装所有依赖项:
npm install --registry=https://registry.npmmirror.com
1
# 7. 构建 Electron 应用
使用以下命令进行构建:
npm run electron:build
1
构建成功后,会在 dist_electron
目录中生成 .exe
文件,点击安装即可。
# 8. 处理安装失败的情况
如果安装失败,可以配置镜像地址并使用 cnpm
尝试单独安装 Electron 相关依赖。
# 配置 Electron 镜像地址
npm config set registry http://registry.npm.taobao.org/
npm config set electron_mirror="https://npm.taobao.org/mirrors/electron/"
npm config set electron_builder_binaries_mirror="http://npm.taobao.org/mirrors/electron-builder-binaries/"
# 安装 Electron
cnpm install electron --save-dev
# 安装 Electron 管理开发者工具
cnpm install electron-devtools-installer
# 安装 Electron 持久化数据存储库
cnpm install electron-store
# 安装 Electron 打包和构建工具
cnpm install vue-cli-plugin-electron-builder
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08