D2Admin与Electron集成：构建桌面端管理系统-优快云博客

D2Admin与Electron集成：构建桌面端管理系统

【免费下载链接】d2-admin 项目地址: https://gitcode.com/gh_mirrors/d2a/d2-admin

引言：从Web到桌面的无缝迁移

你是否曾遇到过这样的痛点：Web版管理系统需要依赖浏览器运行，无法离线使用，且在不同设备间切换时体验不一致？D2Admin作为一款优秀的前端管理系统框架，结合Electron（电子）可以将Web应用打包为跨平台的桌面应用，完美解决这些问题。本文将详细介绍如何实现D2Admin与Electron的集成，让你快速拥有一个功能强大的桌面端管理系统。读完本文，你将获得：

了解D2Admin与Electron集成的完整流程
掌握在Electron环境下D2Admin的配置与优化方法
学会打包和分发桌面应用的技巧

准备工作：环境搭建与依赖安装

系统要求

Node.js（Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时（Runtime））版本 14.x 及以上
npm（Node Package Manager，Node.js 的包管理器）或 yarn（另一个流行的 JavaScript 包管理器）

安装Node.js和npm

如果你的系统中尚未安装Node.js和npm，可以通过以下命令安装：

curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs

克隆项目

首先，克隆D2Admin项目到本地：

git clone https://gitcode.com/gh_mirrors/d2a/d2-admin.git
cd d2-admin

安装项目依赖

进入项目目录后，安装D2Admin的依赖：

npm install

安装Electron相关依赖

安装Electron和Electron Builder作为开发依赖：

npm install electron electron-builder --save-dev

项目配置：Electron与D2Admin的融合

修改package.json文件

在package.json中添加Electron相关脚本和配置：

添加scripts：

"scripts": {
  "electron:serve": "electron . --serve",
  "electron:build": "vue-cli-service build && electron-builder"
}

添加Electron配置：

"main": "electron-main.js",
"build": {
  "appId": "com.d2admin.electron",
  "productName": "D2Admin Desktop",
  "directories": {
    "output": "dist_electron"
  },
  "files": [
    "dist/**/*",
    "electron-main.js"
  ],
  "win": {
    "icon": "public/icon.ico"
  },
  "mac": {
    "icon": "public/icon.ico"
  },
  "linux": {
    "icon": "public/icon.ico"
  }
}

创建Electron主进程文件

在项目根目录下创建electron-main.js文件，作为Electron的主进程入口：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    title: 'D2Admin 桌面管理系统',
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

  const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/dist/index.html'),
    protocol: 'file:',
    slashes: true
  })

  mainWindow.loadURL(startUrl)

  mainWindow.on('closed', function () {
    mainWindow = null
  })
};

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
});

D2Admin在Electron中的适配与优化

路由配置调整

由于Electron中使用的是本地文件路径，需要修改src/router/index.js中的路由模式为hash模式：

const router = new VueRouter({
  mode: 'hash', // 原为history模式，在Electron中改为hash模式
  base: process.env.BASE_URL,
  routes
})

窗口大小与样式优化

在Electron主进程中，可以根据需要调整窗口的默认大小和样式。例如，设置窗口最大化：

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    title: 'D2Admin 桌面管理系统',
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })
  
  mainWindow.maximize() // 窗口最大化
  // ...
}

离线数据存储

利用Electron提供的node环境，可以使用lowdb（一个小型的本地JSON数据库）来实现离线数据存储。D2Admin中已经集成了lowdb，你可以直接在src/libs/util.db.js中使用：

import low from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'

const adapter = new FileSync('db.json')
const db = low(adapter)

// 初始化数据库
db.defaults({ users: [], settings: {} })
  .write()

export default db

运行与调试：开发环境测试

启动开发服务器

首先启动D2Admin的开发服务器：

npm run serve

启动Electron应用

在另一个终端窗口中，启动Electron应用：

npm run electron:serve

此时，Electron会加载D2Admin的开发服务器地址，你可以像在浏览器中一样进行开发和调试，但拥有了桌面应用的体验。

打包与分发：生成可执行文件

构建Web应用

首先，构建D2Admin的生产版本：

npm run build

打包桌面应用

使用electron-builder打包桌面应用：

npm run electron:build

打包完成后，在项目根目录下的dist_electron文件夹中会生成对应平台的安装包或可执行文件。

打包配置说明

在package.json的build配置中，可以根据需要修改打包参数：

appId：应用的唯一标识
productName：应用名称
directories.output：输出目录
files：需要打包的文件
win/mac/linux：对应平台的特有配置，如图标、签名等

常见问题与解决方案

问题1：Electron窗口白屏

原因：可能是路由模式设置不当或资源路径错误。 解决方案：确保路由模式为hash模式，检查index.html中资源的引用路径是否正确。

问题2：Node.js模块无法在渲染进程中使用

原因：Electron默认禁用了在渲染进程中直接使用Node.js模块。 解决方案：在创建BrowserWindow时，设置webPreferences中的nodeIntegration为true，contextIsolation为false。

问题3：应用打包后体积过大

原因：打包时包含了不必要的依赖和资源。 解决方案：

使用electron-builder的tree-shaking功能
优化项目依赖，移除不必要的包
压缩静态资源

总结与展望

通过本文的介绍，我们实现了D2Admin与Electron的完美集成，将Web版管理系统转变为功能强大的桌面应用。回顾整个过程，我们从环境搭建、依赖安装，到项目配置、运行调试，再到打包分发，一步步构建了完整的桌面应用开发流程。

未来，你可以进一步探索以下方向：

利用Electron的IPC（进程间通信）机制，实现主进程与渲染进程的高效通信
集成桌面通知、系统托盘等原生功能
优化应用性能，减少内存占用和启动时间
实现自动更新功能，让用户能够及时获取应用更新

D2Admin与Electron的结合，为管理系统开发提供了新的可能性。希望本文能够帮助你快速上手，开发出优秀的桌面端管理系统。

附录：完整配置文件示例

package.json（部分）

"scripts": {
  "serve": "vue-cli-service serve --open",
  "start": "npm run serve",
  "dev": "npm run serve",
  "build": "vue-cli-service build --report",
  "build:preview": "NODE_OPTIONS=--max_old_space_size=4096 vue-cli-service build --mode preview",
  "lint": "vue-cli-service lint --fix",
  "test:unit": "vue-cli-service test:unit",
  "electron:serve": "electron . --serve",
  "electron:build": "vue-cli-service build && electron-builder"
},
"main": "electron-main.js",
"build": {
  "appId": "com.d2admin.electron",
  "productName": "D2Admin Desktop",
  "directories": {
    "output": "dist_electron"
  },
  "files": [
    "dist/**/*",
    "electron-main.js"
  ],
  "win": {
    "icon": "public/icon.ico"
  },
  "mac": {
    "icon": "public/icon.ico"
  },
  "linux": {
    "icon": "public/icon.ico"
  }
}

【免费下载链接】d2-admin 项目地址: https://gitcode.com/gh_mirrors/d2a/d2-admin

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考