vue3-element-adminElectron桌面应用：从Web到桌面端-优快云博客

vue3-element-adminElectron桌面应用：从Web到桌面端

【免费下载链接】vue3-element-admin 基于 vue3 + vite4 + typescript + element-plus 构建的后台管理系统（配套接口文档和后端源码）。vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin

项目概述

vue3-element-admin是基于vue3 + vite4 + typescript + element-plus构建的后台管理系统，本文将介绍如何将其转换为Electron桌面应用。项目路径：GitHub_Trending/vue3/vue3-element-admin

环境准备

首先需要安装Electron相关依赖，执行以下命令：

npm install electron electron-builder vite-plugin-electron --save-dev

配置Electron

创建主进程文件

创建Electron主进程文件electron/main.js，代码如下：

const { app, BrowserWindow } = require("electron");
const path = require("path");

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: true,
      contextIsolation: false
    },
    icon: path.join(__dirname, "../public/favicon.ico")
  });

  const url = process.env.NODE_ENV === "development"
    ? "http://localhost:5173"
    : `file://${path.join(__dirname, "../dist/index.html")}`;

  mainWindow.loadURL(url);

  if (process.env.NODE_ENV === "development") {
    mainWindow.webContents.openDevTools();
  }

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

app.whenReady().then(createWindow);

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

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

应用图标

使用项目中已有的图标文件作为应用图标：

运行与打包

开发模式

在package.json中添加开发脚本：

"scripts": {
  "electron:dev": "vite dev && electron ."
}

打包应用

添加打包脚本：

"scripts": {
  "electron:build": "vite build && electron-builder"
}

打包配置可在package.json中添加：

"build": {
  "appId": "com.example.vue3-element-admin",
  "productName": "vue3-element-admin",
  "directories": {
    "output": "dist_electron"
  },
  "files": [
    "dist/**/*",
    "electron/**/*"
  ],
  "win": {
    "icon": "public/favicon.ico"
  },
  "mac": {
    "icon": "public/favicon.ico"
  },
  "linux": {
    "icon": "public/favicon.ico"
  }
}

项目结构

转换为Electron应用后的项目主要结构如下：

src/：Web应用源代码
electron/：Electron主进程代码
public/：静态资源

总结

通过以上步骤，我们成功将vue3-element-admin从Web应用转换为Electron桌面应用。这使得应用可以脱离浏览器运行，提供更好的桌面端体验。更多详细配置可参考Electron官方文档和项目中的README.md。

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