# vite-electron

**Repository Path**: wei_work/vite-electron

## Basic Information

- **Project Name**: vite-electron
- **Description**: vite 插件，用于使用vite的electron项目的启动与打包
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: development
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-10-15
- **Last Updated**: 2023-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite, Electron, npm

## README

# vite 插件 vite-electron

vite 运行时同步运行 electron，vite 打包时同步 electron 打包

## 1. 安装

```javascript
npm install vite-electron
// vite-electron 依赖electron-builder打包工具
npm install electron-builder
```

## 2. 使用方法

```javascript
// vite.config.js
import { ViteElectron } from "vite-electron";
export default defineConfig({
  plugins: [ViteElectron()],
});
```

## 3. 配置参数

### **dir** : `string`

- 主进程代码所在目录; 默认：根目录下 main 文件夹
- 用于主进程代码文件夹
- 用于锁定入口文件的路径
- 用于监听目录下文件文件变化

### **out** : `string`

- 打包输出文件夹路径; 默认：根目录下 dist 文件夹
- 设置主进程渲染进程导出的总目录

### **_entrance_** : `string`

- [主进程]代码所在目录的入口文件名;默认为 index.ts
- 入口文件可为`.ts` 或则`.js`

### **_bundle_** : `boolean`

- [主进程]代码编译是否文件合并;默认为 true
- 用于把所有主进程代码、第三方包合成为一个文件
- 主进程代码如果没有涉及动态引入文件方面的逻辑，建议把此项设为`true`
- 配合配置文件`package.json` 把所有模块放在`devDependencies`下，打包将不生成`node_modules`文件夹
- 如打包时 asar 设置为 false, 配合增量文件`incremental-update-[version].zip` 可做到静默更新

### **_external_** : `string[]`

- [主进程] 文件合成、第三方包合成排除; 默认为 ['electron']
- 此项配置当 bundle 为`true`时生效
- 配置此项文件合并时会解析第三方包的导入情况，遇到匹配的情况下则保留为 CommonJS 规范导入

### **_exclude_** : `string[]`

- [渲染进程] 第三方包 vite 打包排除; 默认为 ['electron']

- 前段代码打包时如果使用了蕴含 nodejs 的第三方包，打包时会报错，些项目配置主要用于处理此问题
- 相关包保留为 CommonJS 规范导入

### **build** :

- electron-builder 打包配置 [相关文档]("https://blog.csdn.net/qq_38830593/article/details/89843722")

### **publicDir** : `string`

- 静态文件文件夹
- 用于主进程的静态资源存放处，用托盘之类的模块使用
- 打包时会把文件的所有文件拷贝到 public 文件夹下
- public 文件夹打包后会和 main/render 处于同级

### **onlyPackageCode** : `boolean`

- 只打包代码不执行 build 操作

## 4. 主进程代码

```javascript
// main/index.js or main/index.ts
import path from "path";
import { app, BrowserWindow } from "electron";
function createMainWindow() {
  const { NODE_ENV, NODE_PORT } = process.env;
  const url = NODE_ENV
    ? `http://localhost:${NODE_PORT}`
    : `file://${path.join(__dirname, "../render/index.html")}`;

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

  win.loadURL(url);
}

app.whenReady().then(createMainWindow);
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});
app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) createMainWindow();
});
```

## 5. 提供一份简单的打包配置

> package.json, 配置 main、version

```json
{
  "main": "./dist/main/index.js",
  "version": "0.0.1"
}
```

> vite.config.js 使用插件

```javascript
export default defineConfig({
  base: "./",
  plugins: [
    ViteElectron({
      bundle: false,
      build: {
        // 此项为打包arm64架构的执行程序
        // 如果需打包其他架构可自行配置ia32、x64等架构配置为true即可
        arm64: true,
        config: {
          productName: "vite-electron-app",
          appId: "com.vite.electron",
          asar: false,
          directories: {
            output: "build",
          },
          files: ["dist"],
          dmg: {
            contents: [
              { x: 410, y: 150, type: "link", path: "/Applications" },
              { x: 130, y: 150, type: "file" },
            ],
          },
          nsis: {
            oneClick: false,
            allowToChangeInstallationDirectory: true,
            allowElevation: true,
            installerIcon: "",
            uninstallerIcon: "",
            installerHeaderIcon: "",
            createDesktopShortcut: true,
            createStartMenuShortcut: true,
          },
          mac: {
            target: ["dmg", "zip"],
          },
        },
      },
    }),
  ],
});
```