Electron Vue 项目打包成 EXE：从入门到精通，避坑指南

在 Electron Vue 项目开发完成后，将应用打包成可执行的 EXE 文件是发布流程中的关键一步。然而，在实际操作中，我们经常会遇到各种各样的问题，例如打包失败、运行出错、体积过大等等。本文将深入探讨 Electron Vue 项目打包 EXE 的底层原理，并提供具体的代码配置解决方案和实战避坑经验，助你顺利完成打包发布。

常见打包工具与原理

目前主流的 Electron 打包工具有 electron-packager、electron-builder、asar 等。它们各有特点，但核心原理都是将 Electron runtime 和 Vue 应用代码打包成一个或多个可执行文件。

• electron-packager: 简单易用，但功能相对较弱，例如不支持自动更新。
• electron-builder: 功能强大，支持自动更新、代码签名等高级特性，但配置相对复杂。
• asar: 用于将应用代码打包成一个归档文件，可以提高应用的安全性和启动速度。

在打包过程中，还需要考虑应用依赖的第三方模块。如果依赖的模块包含 native 模块 (C++ 编写)，需要进行 rebuild，以确保它们与 Electron runtime 的 ABI 兼容。 这个过程类似于 Java 应用发布前需要考虑 JVM 的版本兼容性。

使用 electron-builder 打包 EXE

electron-builder 是一个流行的 Electron 打包工具，它提供了丰富的功能和灵活的配置选项。以下是使用 electron-builder 打包 EXE 的基本步骤：

1. 安装 electron-builder:

npm install electron-builder --save-dev ```

2. 配置 package.json:

   

   在 package.json 文件中添加 build 字段，配置打包选项。以下是一个示例配置：

   {
     "name": "my-electron-vue-app",
     "version": "1.0.0",
     "main": "electron/main.js",
     "scripts": {
       "build": "vue-cli-service build",
       "electron:build": "vue-cli-service electron:build",
       "electron:serve": "vue-cli-service electron:serve",
       "postinstall": "electron-builder install-app-deps"
     },
     "build": {
       "appId": "com.example.myapp",
       "productName": "My App",
       "copyright": "Copyright © 2023 Example",
       "asar": true,
       "directories": {
         "output": "dist_electron"
       },
       "files": [
         "dist/**/*",
         "electron/**/*"
       ],
       "win": {
         "target": [
           "nsis",
           "portable"
         ],
         "icon": "public/icon.ico"
       },
       "nsis": {
         "oneClick": false,
         "allowElevation": true,
         "allowToChangeInstallationDirectory": true,
         "createDesktopShortcut": true,
         "uninstallDisplayName": "My App"
       }
     }
   }
   

   • appId: 应用的唯一标识符，用于自动更新。
   • productName: 应用的名称，显示在安装程序和桌面快捷方式中。
   • copyright: 版权信息。
   • asar: 是否将应用代码打包成 asar 文件。
   • directories.output: 打包输出目录。
   • files: 需要包含在打包文件中的文件和目录。
   • win.target: Windows 平台的目标格式，nsis 表示使用 NSIS 安装程序，portable 表示生成便携版。
   • win.icon: 应用图标。
   • nsis: NSIS 安装程序的配置选项。

3. 执行打包命令:

npm run electron:build ```

打包完成后，EXE 文件将生成在 `dist_electron` 目录下。

实战避坑经验

• 依赖问题: 确保所有依赖都已正确安装，并且版本兼容。可以使用 npm install --verbose 命令查看安装过程中的详细信息，排查依赖问题。如果遇到 native 模块相关的错误，可以尝试使用 electron-rebuild 命令手动 rebuild。
• 路径问题: 注意文件路径的正确性，尤其是在使用相对路径时。可以使用 path 模块来处理路径，确保跨平台兼容性。
• 体积问题: Electron 应用的体积通常比较大，可以通过以下方式减小体积：
  • 使用 asar 打包应用代码。
  • 压缩图片、音频等资源文件。
  • 移除不必要的依赖。
  • 使用 webpack 进行代码拆分，按需加载模块。
• 签名问题: 为了提高应用的可信度，建议对 EXE 文件进行签名。可以使用 electron-builder 提供的代码签名功能，或者使用第三方签名工具。在 Windows 平台，代码签名尤其重要，因为未签名的应用可能会被系统阻止运行。
• 自动更新: electron-builder 提供了自动更新功能，可以方便地将新版本推送给用户。需要配置相关的更新服务器和更新策略。
• 兼容性问题: 在不同的 Windows 版本上，Electron 应用可能会出现兼容性问题。建议在多个 Windows 版本上进行测试，确保应用能够正常运行。同时需要注意 Electron runtime 本身的兼容性，及时升级 Electron 版本。

解决打包后的白屏问题

很多开发者在 Electron Vue 项目打包后会遇到白屏问题，这通常是由于资源路径不正确导致的。在 Vue 项目中，静态资源通常使用相对路径引用。打包后，这些路径可能发生变化，导致资源加载失败。

解决方法是：

1. 修改 Vue CLI 的 publicPath 配置：

   

   在 vue.config.js 文件中，设置 publicPath 为 ./：

   module.exports = {
     publicPath: './'
   }
   

2. 使用绝对路径引用资源：

   在 Vue 组件中，使用 require 或 import 语句引入静态资源，而不是使用相对路径。

   // 正确
   import logo from '@/assets/logo.png'
   
   // 错误
   <img src="./assets/logo.png">
   

通过以上配置，可以确保打包后的应用能够正确加载静态资源，避免白屏问题。

总结：Electron Vue 项目打包成 EXE 文件是一个复杂的过程，需要考虑各种因素。通过本文的介绍，相信你已经掌握了基本的打包方法和常见的解决方案。希望你在实践中不断总结经验，提升自己的技术水平。