以 Electron 焕新你的 Vite + Vue 3 项目：一个打包与热重载指南

引言

在竞争激烈的软件开发领域，跨平台应用程序开发的需求正在稳步增长。Electron，一个基于 Chromium 和 Node.js 的框架，提供了构建跨平台桌面应用程序的强大手段。本文将带你踏上将 Electron 集成到 Vite + Vue 3 项目中的旅程，让你能够无缝地打包和热重载你的页面。

1. 安装 Electron

首先，你需要通过 npm 全局安装 Electron：

npm install electron -g

2. 创建 Electron 文件夹

在你的项目根目录中创建一个名为 "electron" 的文件夹。在这个文件夹中，你将创建 Electron 相关的文件。

3. 初始化 Electron 项目

使用以下命令初始化 Electron 项目：

cd electron
electron init

这将创建必要的 Electron 配置文件和主进程文件（main.js）。

4. 修改 Vite 配置文件

在你的 Vite 配置文件中（通常是 vite.config.js），添加以下代码以启用 Electron 支持：

// vite.config.js
const { createSharedElectronRenderer } = require('@vitejs/plugin-electron-renderer');

module.exports = {
  plugins: [
    createSharedElectronRenderer(),
  ],
};

5. 运行项目

使用以下命令启动你的项目：

npm run dev

这将启动 Vite 开发服务器，它将监视文件更改并自动重新加载你的页面。

6. 修改 main.js 文件

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

// electron/main.js
const electron = require('electron');
const path = require('path');

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  });

  mainWindow.loadURL('http://localhost:3000');
});

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

此代码创建了一个 Electron 窗口并加载你的 Vue 3 应用。

7. 打包 Electron 应用

要打包你的 Electron 应用，请运行以下命令：

npm run electron:build

这将在 "dist/electron" 目录中生成一个 Electron 应用。

8. 热重载页面

要启用 Electron 中的热重载页面，请在 "electron/package.json" 文件中添加以下代码：

// electron/package.json
{
  "main": "main.js",
  "devtron": true,
  "env": {
    "DEVTRON_PORT": 3001
  }
}

这将启用 Devtron 扩展，它允许你从 Electron 应用程序热重载页面。

结论

通过集成 Electron，你可以赋予你的 Vite + Vue 3 项目跨平台能力，并利用热重载功能快速迭代和开发。本文提供了分步指南，使你能够轻松地将 Electron 添加到你的项目中，并充分利用它的强大功能。