iview-admin与Electron集成：开发桌面版管理系统方案

在企业级应用开发中，管理系统往往需要同时覆盖Web端和桌面端场景。iview-admin作为基于Vue.js和iView UI的优秀前端管理框架，提供了丰富的UI组件和模块化架构。本文将详细介绍如何将iview-admin与Electron集成，打造功能完善的桌面版管理系统，解决Web应用在离线使用、系统资源访问等方面的局限。读完本文后，你将能够：- 理解iview-admin与Electr...

李华蓓Garret

627人浏览 · 2025-09-09 00:56:38

李华蓓Garret · 2025-09-09 00:56:38 发布

iview-admin与Electron集成：开发桌面版管理系统方案

【免费下载链接】iview-admin iview/iview-admin 是一个基于 Vue.js 和 iView UI 的前端管理框架。适合在 Web 应用和管理系统中使用。特点是提供了丰富的 UI 组件、模块化架构和良好的兼容性。项目地址: https://gitcode.com/gh_mirrors/iv/iview-admin

引言

读完本文后，你将能够：

理解iview-admin与Electron集成的核心原理
掌握环境搭建和项目配置的详细步骤
学会解决集成过程中的常见问题
实现桌面应用的打包和分发

技术栈概述

核心技术组合

技术	版本	作用
iview-admin	2.0.0	提供管理系统UI框架和基础功能
Electron	最新稳定版	将Web应用打包为跨平台桌面应用
Vue.js	2.5.10+	前端框架核心
iView UI	3.2.2+	提供企业级UI组件

架构原理

mermaid

Electron通过主进程（Main Process）和渲染进程（Renderer Process）的架构，使iview-admin能够访问底层系统资源，同时保持Vue.js的开发体验。

环境准备

系统要求

操作系统：Windows 7/8/10 64位、macOS 10.10+或Linux
内存：至少4GB RAM
磁盘空间：至少1GB可用空间

项目获取

git clone https://gitcode.com/gh_mirrors/iv/iview-admin
cd iview-admin

集成步骤

1. 安装Electron依赖

由于Node.js环境未配置，以下为理论安装命令：

npm install electron electron-builder --save-dev
npm install electron-is-dev --save

2. 创建Electron主进程文件

在项目根目录创建electron-main.js：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    },
    title: 'iview-admin桌面管理系统'
  });

  // 加载应用
  const startUrl = isDev 
    ? 'http://localhost:8080' 
    : `file://${path.join(__dirname, './dist/index.html')}`;
    
  mainWindow.loadURL(startUrl);

  // 开发环境下打开开发者工具
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }

  // 窗口关闭事件
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

// 应用就绪后创建窗口
app.on('ready', createWindow);

// 所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// macOS下点击dock图标时重新创建窗口
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

3. 修改package.json配置

添加Electron相关配置：

{
  "main": "electron-main.js",
  "scripts": {
    "electron:dev": "electron .",
    "electron:build": "vue-cli-service build && electron-builder"
  },
  "build": {
    "appId": "com.iview.admin",
    "productName": "iview-admin桌面管理系统",
    "directories": {
      "output": "electron-dist"
    },
    "files": [
      "dist/**/*",
      "electron-main.js"
    ],
    "win": {
      "target": "nsis",
      "icon": "build/icons/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "build/icons/icon.icns"
    },
    "linux": {
      "target": "deb",
      "icon": "build/icons"
    }
  }
}

4. 解决路径问题

修改iview-admin的配置文件src/config/index.js：

// 添加判断是否为Electron环境的逻辑
const isElectron = window && window.process && window.process.type;

export default {
  // 基础URL配置
  baseUrl: isElectron ? '' : '/',
  
  // 其他配置保持不变
  // ...
};

5. 系统API集成示例

创建Electron服务src/libs/electron-service.js：

// 封装Electron API调用
export default {
  // 判断是否在Electron环境中
  isElectron() {
    return window && window.process && window.process.type;
  },
  
  // 打开文件对话框
  async openFileDialog() {
    if (!this.isElectron()) return null;
    
    const { dialog } = require('electron').remote;
    const result = await dialog.showOpenDialog({
      properties: ['openFile'],
      filters: [
        { name: 'Excel Files', extensions: ['xlsx', 'xls'] },
        { name: 'All Files', extensions: ['*'] }
      ]
    });
    
    return result.filePaths[0] || null;
  },
  
  // 保存文件对话框
  async saveFileDialog(defaultPath, data) {
    if (!this.isElectron()) return false;
    
    const { dialog } = require('electron').remote;
    const fs = require('fs');
    const path = require('path');
    
    const result = await dialog.showSaveDialog({
      defaultPath,
      filters: [
        { name: 'Excel Files', extensions: ['xlsx'] },
        { name: 'All Files', extensions: ['*'] }
      ]
    });
    
    if (!result.filePath) return false;
    
    try {
      fs.writeFileSync(result.filePath, data);
      return true;
    } catch (e) {
      console.error('保存文件失败:', e);
      return false;
    }
  }
};

6. 在Vue组件中使用Electron API

以文件导入功能为例：

<template>
  <Button @click="importFromFile" type="primary" icon="ios-upload">
    从本地文件导入
  </Button>
</template>

<script>
import electronService from '@/libs/electron-service';
import XLSX from 'xlsx';

export default {
  methods: {
    async importFromFile() {
      if (!electronService.isElectron()) {
        this.$Message.warning('此功能仅在桌面版可用');
        return;
      }
      
      try {
        const filePath = await electronService.openFileDialog();
        if (!filePath) return;
        
        const fs = require('fs');
        const fileData = fs.readFileSync(filePath);
        const workbook = XLSX.read(fileData, { type: 'buffer' });
        
        // 处理Excel数据
        // ...
        
        this.$Message.success('导入成功');
      } catch (e) {
        this.$Message.error('导入失败: ' + e.message);
      }
    }
  }
};
</script>

应用打包与分发

打包命令

# 开发环境运行
npm run dev && npm run electron:dev

# 构建生产版本并打包
npm run electron:build

打包输出

打包完成后，在项目根目录的electron-dist文件夹中会生成对应平台的安装包：

Windows: .exe 或 .nsis 安装程序
macOS: .dmg 磁盘镜像
Linux: .deb 或 .rpm 包

签名与分发

对于正式发布，建议进行代码签名：

Windows: 使用Microsoft Authenticode证书
macOS: 使用Apple Developer ID
Linux: 无需签名，但可使用GPG签名deb包

常见问题解决方案

1. 窗口白屏问题

mermaid

2. Node.js集成问题

Electron 12+版本默认禁用了Node.js集成，需要在webPreferences中显式启用：

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false,
  enableRemoteModule: true
}

3. 打包体积优化

优化方法	预期效果
移除未使用依赖	减少5-15%体积
图片压缩和懒加载	减少10-20%体积
使用asar打包	减少文件数量，提高加载速度
代码分割和按需加载	减少初始加载时间

4. 热更新实现

使用electron-updater实现应用自动更新：

// 在electron-main.js中添加
const { autoUpdater } = require('electron-updater');

// 检查更新
autoUpdater.checkForUpdatesAndNotify();

// 监听更新事件
autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
  const dialogOpts = {
    type: 'info',
    buttons: ['重启', '稍后'],
    title: '应用更新',
    message: process.platform === 'win32' ? releaseNotes : releaseName,
    detail: '已下载更新，请重启应用以应用更新。'
  };

  dialog.showMessageBox(dialogOpts).then((returnValue) => {
    if (returnValue.response === 0) autoUpdater.quitAndInstall();
  });
});

性能优化建议

渲染优化

减少DOM操作：利用Vue的虚拟DOM和响应式系统
优化组件加载：使用路由懒加载和组件按需加载
避免内存泄漏：及时销毁定时器和事件监听

启动速度优化

mermaid

内存占用控制

限制同时打开的窗口数量
大型数据处理使用Web Worker
图片和文件资源使用后及时释放

总结与展望

主要成果

本文详细介绍了iview-admin与Electron集成的全过程，包括环境搭建、项目配置、功能实现和打包分发。通过这种方式，我们可以充分利用iview-admin的UI组件和Electron的系统访问能力，快速开发出功能完善的桌面管理系统。

未来改进方向

升级技术栈：迁移到Vue 3和最新版Electron
模块化设计：将Electron相关功能封装为独立插件
增强离线能力：集成IndexedDB实现数据本地存储
多窗口管理：优化多窗口通信和状态同步

通过持续优化和改进，iview-admin桌面版可以为企业提供更强大、更稳定的管理系统解决方案。

附录：完整配置文件

package.json完整配置

{
  "name": "iview-admin",
  "version": "2.0.0",
  "author": "Lison<lison16new@163.com>",
  "private": false,
  "main": "electron-main.js",
  "scripts": {
    "dev": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "electron:dev": "electron .",
    "electron:build": "vue-cli-service build && electron-builder"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "clipboard": "^2.0.0",
    "codemirror": "^5.38.0",
    "countup": "^1.8.2",
    "cropperjs": "^1.2.2",
    "dayjs": "^1.7.7",
    "echarts": "^4.0.4",
    "html2canvas": "^1.0.0-alpha.12",
    "iview": "^3.2.2",
    "iview-area": "^1.5.17",
    "js-cookie": "^2.2.0",
    "simplemde": "^1.11.2",
    "sortablejs": "^1.7.0",
    "tree-table-vue": "^1.1.0",
    "v-org-tree": "^1.0.6",
    "vue": "^2.5.10",
    "vue-i18n": "^7.8.0",
    "vue-router": "^3.0.1",
    "vuedraggable": "^2.16.0",
    "vuex": "^3.0.1",
    "wangeditor": "^3.1.1",
    "xlsx": "^0.13.3",
    "electron-is-dev": "^2.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.1",
    "@vue/cli-plugin-eslint": "^3.0.1",
    "@vue/cli-plugin-unit-mocha": "^3.0.1",
    "@vue/cli-service": "^3.0.1",
    "@vue/eslint-config-standard": "^3.0.0-beta.10",
    "@vue/test-utils": "^1.0.0-beta.10",
    "chai": "^4.1.2",
    "eslint-plugin-cypress": "^2.0.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "lint-staged": "^6.0.0",
    "mockjs": "^1.0.1-beta3",
    "vue-template-compiler": "^2.5.13",
    "electron": "^13.0.0",
    "electron-builder": "^22.11.7"
  },
  "build": {
    "appId": "com.iview.admin",
    "productName": "iview-admin桌面管理系统",
    "directories": {
      "output": "electron-dist"
    },
    "files": [
      "dist/**/*",
      "electron-main.js"
    ],
    "win": {
      "target": "nsis",
      "icon": "build/icons/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "build/icons/icon.icns"
    },
    "linux": {
      "target": "deb",
      "icon": "build/icons"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

希望本文提供的方案能够帮助你顺利实现iview-admin的桌面化，为企业管理系统开发提供新的可能性。如有任何问题或建议，欢迎在评论区交流讨论。

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

别再乱接 SDK 了：鸿蒙第三方插件集成的正确姿势

开源鸿蒙跨平台开发者社区

白帽系列01: 抓包

WhiteHat是一个Java网络抓包分析库，支持TCP/UDP等协议的数据包捕获与发送。使用前需安装WinPcap/libpcap依赖库。通过Maven引入依赖后，只需3步即可实现抓包功能：打开网卡、定义处理程序、开始抓包。支持BPF过滤表达式、数据包转存为.pcap文件，并提供ARP/ICMP/DNS/DHCP等协议处理示例。特别提供高效的IP网段扫描(5000IP/秒)和端口扫描(5000端