开发喵星球

需求提出

在若依分离版项目中集成 Electron，实现桌面应用程序，使得用户可以通过桌面应用访问若依管理系统。

相关介绍

Electron 是一个用于构建跨平台桌面应用的框架，它使用 Node.js 和 Chromium 来构建应用程序。

解决思路

1. 修改 package.json 文件，添加 Electron 相关依赖和配置。
2. 配置后端接口地址。
3. 创建 background.js 文件，定义 Electron 应用的主进程。
4. 调整部分代码以支持 Electron 应用。
5. 将项目中使用到的 Cookie 替换为 LocalStorage。
6. 安装项目依赖。
7. 使用 Electron 打包项目。

所需技术

• Java 8+
• Spring Boot
• Vue.js
• Electron 26.2.0
• Node.js
• NPM 或 Yarn

项目结构

ruoyi-ui
├── src
│   ├── background.js
│   ├── layout
│   │   └── components
│   │       └── Navbar.vue
│   ├── router
│   │   └── index.js
│   ├── utils
│       └── request.js
├── .env.production
├── package.json

注意事项

1. 确保 Node.js 和 NPM 已安装。
2. 修改代码时注意路径和文件名的准确性。
3. 如果安装依赖或打包过程中出现问题，可以尝试使用国内镜像源。
4. 确保所有依赖版本兼容。

完整代码

第一步: 修改 package.json 文件

{
  "name": "ruoyi",
  "version": "3.8.6",
  "description": "若依管理系统",
  "author": "若依",
  "license": "MIT",
  "main": "background.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "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"
  }
}

第二步: 配置后端接口地址，修改 .env.production 文件

# 你自己的后端接口地址
VUE_APP_BASE_API = 'https://vue.ruoyi.vip/prod-api'

第三步: 在 ruoyi-ui/src 下新建 background.js 文件

'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', (event, commandLine, workingDirectory, additionalData) => {
    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()
      })
    }
  }
}

第四步: 调整部分代码以支持 Electron 应用

修改 layout/components/Navbar.vue 和 utils/request.js，将 location.href = '/index' 替换为 this.$router.push('/login')

this.store.dispatch('LogOut').then(() => {
    this.router.push('/login');
})

修改 router/index.js，将 mode: 'history' 替换为 mode: 'hash'

export default new Router({
  mode: 'hash',
  ...
})

第五步: 将项目中使用到的 Cookie 替换为 LocalStorage

参考若依框架使用 LocalStorage 代替 Cookie 的相关文档。

第六步: 安装项目依赖

npm install --registry=https://registry.npmmirror.com

第七步: 使用 Electron 打包项目

npm run electron:build

运行结果

打包成功后，会在 dist_electron 目录中生成 .exe 文件，点击安装即可运行桌面应用程序。

如果安装失败，可以配置镜像地址后使用 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