集成 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"
  }
}

在 scripts 中添加了三个命令，用于启动和构建 Electron 应用程序。

---

2. 配置后端接口地址

在 ruoyi-ui/.env.production 文件中修改 VUE_APP_BASE_API 属性，指向你实际的后端接口地址。

VUE_APP_BASE_API = 'https://vue.ruoyi.vip/prod-api'

---

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()
      })
    }
  }
}

这个文件是 Electron 的主进程代码，负责创建窗口和加载应用程序。

---

4. 调整部分代码以支持 Electron 应用

• 修改 Navbar.vue 和 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'，以确保 Electron 应用中的路由工作正常。

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

---

5. 将项目中的 cookie 替换为 localStorage

在项目中，如果有使用 cookie 进行数据存储的地方，建议替换为 localStorage，以确保在桌面应用中数据能够正确存储和读取。

---

6. 安装依赖

在命令行中运行以下命令，安装所有依赖项：

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

---

7. 构建 Electron 应用

使用以下命令进行构建：

npm run electron:build

构建成功后，会在 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