UniApp 打包项目为桌面端 exe 文件

最新推荐文章于 2025-06-05 18:15:39 发布

不知名靓仔

最新推荐文章于 2025-06-05 18:15:39 发布

阅读量3.6k

点赞数 19

CC 4.0 BY-SA版权

文章标签： uni-app electron

本文链接：https://blog.youkuaiyun.com/qq_42072014/article/details/140705497

引言

随着跨平台开发的需求日益增长，UniApp 成为了开发者们的首选之一。通过 UniApp，你可以使用 Vue.js 的语法结构和组件系统来构建原生应用、Web 应用甚至是桌面应用。本文将详细介绍如何使用 UniApp 将你的项目打包成 Windows 桌面端的 exe 文件。

前提条件

已安装 Node.js (建议使用 LTS 版本)
已安装 Git (可选)
已安装 HBuilderX 或其他支持 UniApp 的 IDE
已安装 uni-app CLI (npm install -g @dcloudio/uni-app)

步骤 1: 创建或准备 UniApp 项目

如果你还没有 UniApp 项目，可以使用 HBuilderX 或者命令行创建一个新的项目：
Bash
```
1npx @dcloudio/uni-app create my-project
2cd my-project
```
如果你已经有了一个 UniApp 项目，确保它已经包含了你需要的所有功能。

步骤 2: 安装 Electron 相关插件

在项目根目录下打开终端，安装 uni-app 的 Electron 插件：
Bash
```
1npm install --save-dev @dcloudio/uni-electron
```

确保你的 uni.config.json 文件中已经配置了 Electron 相关的信息：

Json

1{
2  "electron": {
3    "mainProcessFile": "src-electron/main.js", // 主进程文件
4    "preload": "src-electron/preload.js", // 预加载脚本
5    "name": "YourAppName",
6    "version": "1.0.0",
7    "description": "Your app description",
8    "author": "Your name"
9  }
10}

如果你需要自定义 Electron 的主进程文件或者预加载脚本，可以在 src-electron 目录下创建相应的文件。

步骤 3: 打包 Electron 应用

使用 HBuilderX 打开你的项目，点击菜单栏中的“编译” -> “编译 Electron” 或者使用命令行进行打包：
Bash
```
1npx uni-app build --target electron
```
打包完成后，你会在项目的 dist_electron 目录下找到打包好的 Electron 应用程序。

步骤 4: 打包 exe 文件

安装 electron-packager：
Bash
```
1npm install --global electron-packager
```
使用 electron-packager 打包 exe 文件：
Bash
```
1electron-packager . YourAppName --platform=win32 --arch=x64 --out=dist_electron --overwrite
```
这里 . YourAppName 表示当前目录下的项目名称，YourAppName 是生成的应用程序名称。
打包完成后，你可以在 dist_electron/YourAppName-win32-x64 目录下找到生成的 exe 文件。