Vue 2 项目使用 Electron 打包成 `.exe` 文件教程

Vue 2 项目使用 Electron 打包成 .exe 文件教程

以下是完整的步骤，从克隆文件夹到成功打包 Vue 2 项目成可执行的桌面端软件。

---

1. 克隆项目到本地

1. 打开终端，运行以下命令，将项目克隆到本地：

   git clone https://gitcode.com/2202_75337835/electron_dist.git
   

2. 进入项目文件夹：

   cd <项目文件夹名称>
   

---

2. 安装项目依赖

1. 使用 npm 安装依赖：

   npm install
   

2. 如果使用的是 yarn，则运行：

   yarn install
   

---

3. 配置依赖文件

打包过程中可能会遇到以下错误，通常原因是缺少 NSIS 和 WinCodeSign 文件。需要手动配置这些依赖,安装包也已经放入项目中

3.1 配置 NSIS 和 WinCodeSign

1. 下载 WinCodeSign
   下载地址：WinCodeSign 2.6.0 资源文件

2. 配置路径
   将下载的文件放到以下目录： C:\Users\XXX\AppData\Local\electron-builder\Cache

   • 注意：将路径中的 XXX 替换为您的用户名。

3. 如果安装或配置有问题，请参考以下文章：
   CSDN 博客参考链接

---

4. 准备打包文件

1. 将 Vue 2 项目打包生成的 dist 文件夹放到项目的根目录。

2. 修改 package.json 文件中的 packager 字段：

   "packager": "<项目名称>"
   

   将 <项目名称> 替换为您的项目名称。

5. 打包 .exe 文件

1. 在终端中运行以下命令：

   npm run packager
   

   • 说明：确保 package.json 中已正确配置了打包命令。

2. 执行完成后，会在项目中生成一个新的文件夹，里面包含 .exe 文件。

3. 双击 .exe 文件即可启动桌面端软件。

---

6. 常见问题

6.1 打包时报错

1. 查看报错提示，根据提示安装所需的依赖。
2. 常见问题参考：CSDN 博客参考链接

6.2 打包后的 .exe 文件运行时问题

1. 项目接口无法运行

检查接口是否解决了线上 跨域问题，因为打包部署后，vue.config.js 中配置的跨域规则会失效。 确保接口的地址为线上环境的正确地址，而不是本地地址。

2. 本地图片不显示

检查打包后的资源是否正确打包到了 dist 文件夹中。 确保图片的路径为相对路径或静态资源路径。

---

7. 注意事项

• 目前不支持 Vue 3的TS语言，该教程仅适用于 Vue 2 项目。
• 确保项目目录结构正确，尤其是 dist 文件夹和 package.json 文件配置是否正确。

---

完成以上步骤后，您的 Vue 2/3 项目即可通过 Electron 成功打包为 .exe 文件，能够在 Windows 系统上直接运行。🎉