vite + electron-builder 打包配置详解

下面我将为您详细讲解“vite + electron-builder 打包配置详解”的完整攻略。

1. 准备工作

我们首先需要安装 node.js 和 npm，以便我们使用 viter 和 electron-builder。

2. 创建项目

我们使用 vite 创建一个新项目。在命令行中执行以下命令：

npm init vite-app my-electron-app

可以根据自己的需要选择不同的模板，比如 vue、react、preact 等等。

完成后进入项目目录，并使用以下命令安装依赖：

cd my-electron-app
npm install

3. 配置 package.json

在 package.json 中添加以下内容：

"main": "dist/main.js",
"scripts": {
  "dev": "vite",
  "build": "vite build && electron-builder"
},
"build": {
  "sourcemap": true,
  "assetsDir": "assets",
  "outDir": "dist",
  "target": [
    "darwin",
    "linux"
  ]
}

其中，“main”字段指定了 Electron 入口文件的路径，“scripts”字段添加了两个命令，“build”字段则是 electron-builder 的配置。

4. 修改 main.js

我们需要把 main.js 修改成可以被 electron-builder 打包的形式：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

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

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

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

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

这个应用程序很简单：创建一个窗口，载入 index.html。注意这里我们需要使用 __dirname 和 process 的 API 来正确定位文件路径。

5. 打包和发布

在命令行中执行以下命令，就可以打包应用程序并发布：

npm run build

至此，我们就完成了“vite + electron-builder 打包配置详解”的攻略。如果您需要更多详细信息，可以参考 electron-builder 的文档，或者在实践中不断地尝试和探索。

示例1：

以 react 模板为例，创建项目并完成打包发布：

npm init vite-app my-electron-react-app --template react
cd my-electron-react-app
npm install

接着，根据上面的步骤，修改 package.json 和 main.js，然后执行以下命令即可打包和发布：

npm run build

示例2：

以 typescript 模板为例，创建项目并完成打包发布：

npm init vite-app my-electron-ts-app --template typescript
cd my-electron-ts-app
npm install

接着，根据上面的步骤，修改 package.json 和 main.js，注意这里需要使用 typings.d.ts 来指定 electron 模块的类型定义。然后执行以下命令即可打包和发布：

npm run build