electron 打包笔记

下面是一个完整的 Electron 打包教程，以 Markdown 格式编写的文档，适合用于项目文档或 README 文件中。它涵盖了安装依赖、构建项目、配置 Electron 构建和打包等步骤。

# Electron 打包教程

## 1. 环境准备

在开始之前，确保你的开发环境已经安装了以下工具：

- **Node.js**：下载并安装 [Node.js](https://nodejs.org/)，至少需要 `v12` 或更高版本。
- **npm**：Node.js 安装时会自动安装 npm。

### 1.1 安装依赖

在项目目录中，首先初始化 Node 项目并安装所需的依赖。

```bash
npm init -y  # 初始化一个新的 Node.js 项目
npm install electron --save-dev  # 安装 Electron
npm install --save-dev electron-builder  # 安装 Electron Builder (用于打包)
npm install --save vue  # 安装 Vue.js（假设你用的是 Vue）
npm install --save vue-router  # 如果使用了 Vue Router
npm install --save vuex  # 如果使用了 Vuex（可选）

electron-builder 是用于打包 Electron 应用的工具，它支持生成各种操作系统（Windows、macOS、Linux）的安装包。

1.2 配置 TypeScript (如果使用 TypeScript)

如果你在项目中使用 TypeScript，确保安装并配置了相关依赖：

npm install --save-dev typescript @types/node @types/electron

然后，创建 tsconfig.json 配置文件：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

2. 项目结构

项目的目录结构可能如下所示：

/my-electron-app
├── /node_modules          # 安装的依赖包
├── /src                   # 源代码目录
│   ├── /main              # 主进程（Electron）
│   └── /renderer          # 渲染进程（Vue）
├── /dist                  # 构建输出目录
├── package.json           # 项目描述和依赖
├── tsconfig.json          # TypeScript 配置文件（如果使用 TypeScript）
└── electron-builder.yml   # Electron Builder 配置文件

3. 配置 Electron 主进程

在 src/main 目录下，创建 main.ts 或 main.js，这是 Electron 的主进程文件。基本的 Electron 启动代码如下：

import { app, BrowserWindow } from 'electron';

let mainWindow: BrowserWindow | null = null;

function createWindow() {
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // 加载 Vue.js 应用
  mainWindow.loadURL('http://localhost:3000');  // 如果使用 Vue 开发服务器

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

// 当 Electron 完成初始化并准备创建浏览器窗口时调用
app.on('ready', createWindow);

// 退出时关闭窗口
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

4. 配置 Electron 渲染进程

假设你使用 Vue.js 作为渲染进程，你可以在 src/renderer 目录中设置 Vue 项目。你可以使用 Vite 来构建 Vue 应用。创建一个 vite.config.ts 文件，并配置 Vite：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,  // 配置开发服务器端口
  },
});

5. 配置 Electron Builder 打包

在 package.json 中配置 Electron Builder。以下是一个简单的配置：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "dist/main.js",  // 主进程的入口文件
  "scripts": {
    "start": "electron ./dist/main.js",  // 启动应用
    "build": "npm run build:renderer && electron-builder",  // 打包
    "build:renderer": "vite build",  // 构建渲染进程
    "dev": "vite"  // 启动开发服务器
  },
  "devDependencies": {
    "electron": "^25.0.0",
    "electron-builder": "^23.0.0",
    "vite": "^3.0.0",
    "vue": "^3.0.0"
  },
  "dependencies": {
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  },
  "build": {
    "appId": "com.example.app",
    "productName": "My Electron App",
    "files": [
      "dist/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "output": "dist"  // 打包输出目录
    },
    "mac": {
      "target": "dmg",
      "icon": "src/assets/icon.icns"
    },
    "win": {
      "target": "nsis",
      "icon": "src/assets/icon.ico"
    }
  }
}

6. 构建和打包

6.1 构建渲染进程

首先，构建 Vue 渲染进程：

npm run build:renderer

6.2 打包应用

然后，运行 Electron Builder 来打包应用：

npm run build

如果一切正常，electron-builder 会将应用打包为适用于各个平台（Windows、macOS、Linux）的安装包。

7. 打包后的文件

打包完成后，dist/ 目录中会生成平台相关的安装包。例如，在 Windows 上可能会生成 .exe 文件，而在 macOS 上会生成 .dmg 文件。

8. 常见问题

8.1 打包时报错 `Cannot find module 'plist'`

如果遇到 Cannot find module 'plist' 错误，可以按照以下步骤解决：

安装 plist 库：
```
npm install plist --save
```
如果没有为 plist 提供类型定义，创建一个自定义的 plist.d.ts 类型声明文件：
```
declare module 'plist';
```

8.2 Electron 打包时遇到权限问题

在 macOS 或 Linux 上，可能会遇到权限问题。你可以尝试使用 sudo 来解决：

sudo npm run build

注意：在生产环境中避免使用 sudo，只在必要时使用。

9. 参考文档


这个文档详细介绍了如何从零开始构建和打包一个 Electron 应用，涵盖了环境准备、依赖安装、项目结构、构建配置、打包命令以及一些常见问题的解决方案。

### 接下来的步骤：

**a.** 如果你已经成功构建并打包，可以考虑为项目添加自动化测试或者 CI/CD 集成。
**b.** 如果遇到特定平台打包问题，可以进一步研究平台相关的配置（如 macOS 打包相关的代码签名、Windows 安装包定制等）。

菜单

分享