返回

前端工程师独家秘籍：Electron+Vite打造Vite桌面终端

前端

打造 Electron + Vite 桌面终端：加速桌面应用程序开发

简介

Electron 和 Vite 的组合为桌面应用程序开发带来了前所未有的强大协同效应。Vite 作为构建工具，提供闪电般的构建速度和热更新功能，而 Electron 作为桌面应用程序框架，让打包和分发变得轻而易举。本文将深入探讨如何使用 Electron 和 Vite 携手打造高效的桌面终端。

准备工作

踏上 Electron + Vite 之旅之前，确保已安装以下工具：

  • Node.js 16+
  • npm 7+
  • Visual Studio Code 或其他代码编辑器
  • Electron
  • Vite

项目创建

  1. 创建一个新的 Node.js 项目：npx create-vite-app my-app --template electron
  2. 安装必要的依赖项：cd my-app && npm install
  3. 添加以下脚本到 package.json 中：
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "electron:dev": "electron .",
  "electron:build": "electron-builder"
}

Vite 配置

在 vite.config.js 文件中，添加以下配置：

export default {
  mode: "development",
  root: "src",
  build: {
    outDir: "dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: "./src/main.js",
      },
    },
  },
};

Electron 配置

在 main.js 文件中，添加以下代码：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  });

  win.loadFile("index.html");
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

运行项目

  • 开发模式：npm run dev
  • 构建模式：npm run build

打包项目

要将项目打包成可执行文件，请使用以下命令：

npm run electron:build

发布项目

Electron Builder 可以将应用程序发布到各个平台。在 package.json 文件中，添加以下配置：

"electron-builder": {
  productName: "My App",
  appId: "com.example.my-app",
  copyright: "Copyright © 2023",
  directories: {
    output: "release"
  },
  files: ["dist/**/*"],
  dmg: {
    background: "assets/dmg-background.png",
    iconSize: 128,
  },
  win: {
    icon: "assets/icon.ico"
  },
  linux: {
    icon: "assets/icon.png"
  }
}

然后，使用以下命令发布项目：

npm run electron:build

常见问题解答

  • 如何更新 Electron 版本？
npm uninstall electron
npm install electron@desired-version
  • 如何在 Windows 中打包项目？
    添加以下配置到 electron-builder.json：
"win": {
  "target": [
    "nsis",
    "nsis-web"
  ]
}
  • 如何热重新加载渲染器进程？
    在 package.json 中添加 --inspect-brk 标志：
"scripts": {
  "dev": "vite --inspect-brk",
  ...
}
  • 如何禁用开发工具？
    在 main.js 中添加以下代码：
app.on('ready', () => {
  global.sharedObject = { devTools: false };
});
  • 如何使用 Electron API？
    在 main.js 中使用 require('electron') 访问 Electron API。

结语

Electron + Vite 组合将桌面应用程序开发提升到了一个新的高度。通过 Vite 的快速构建和热更新以及 Electron 的打包和分发便利性，开发人员可以高效地创建出色的桌面终端。本文提供的逐步指南和常见问题解答旨在帮助您轻松入门，打造令人印象深刻的桌面应用程序。