uni-app多平台打包上线全攻略

本文将详细讲解 uni-app 在 H5、微信小程序以及原生 App（iOS/Android）三大主流平台的打包上线流程。

1. H5 平台打包上线

H5 平台的打包最为简单，因为它本质上是生成一个标准的静态网站。

配置 manifest.json

首先，打开项目根目录下的 manifest.json 文件，切换到“H5配置”选项卡。关键配置包括：

• 运行的基础路径：根据部署位置设置。如果网站部署在域名根目录（如 https://www.mydomain.com/），填写 /；如果部署在子目录（如 https://www.mydomain.com/m/），则填写 /m/（注意前后都要有斜杠）。
• 开启 history 路由模式（可选）：默认是 hash 模式（URL 如 /#/pages/index/index），如果后端支持，可以勾选 history 模式以获得更美观的 URL（如 /pages/index/index），但需要服务器配置将所有 404 请求指向 index.html。
• 其他配置如网站标题、图标（favicon.ico）等按需填写。

执行打包命令

在 HBuilderX 中，点击顶部菜单栏的“发行” -> “网站-H5手机版(仅适用于手机)”，在弹出的对话框中填写信息后点击“发行”。或者使用命令行：

npm run build:h5 -- --dest h5-dist

部署到服务器

打包完成后，在项目根目录下生成 unpackage/dist/build/h5（HBuilderX）或 h5-dist（CLI）文件夹，将所有文件上传到 Web 服务器（如 Nginx、Apache 或静态托管服务）的指定目录，配置正确后即可通过域名访问。

2. 微信小程序打包上线

微信小程序的上线需要借助“微信开发者工具”。

配置 manifest.json

打开 manifest.json，切换到“微信小程序配置”选项卡，填写微信小程序 AppID（从微信公众平台获取），并配置权限、设置等。

运行到微信开发者工具

在 HBuilderX 中，点击“运行” -> “运行到小程序模拟器” -> “微信开发者工具”，首次运行需在微信开发者工具中指定代码目录（通常为 unpackage/dist/dev/mp-weixin），并开启“服务端口”。

上传代码

开发调试后，点击“发行” -> “小程序-微信(仅适用于uni-app)”，HBuilderX 会进行生产环境编译并输出到 unpackage/dist/build/mp-weixin，自动拉起微信开发者工具。在工具中点击“上传”按钮，填写版本号和备注。

提交审核和发布

登录微信公众平台，进入“管理” -> “版本管理”，在“开发版本”中找到上传的版本，设为体验版测试，然后提交审核。审核通过后，点击“发布”即可全量推送。

3. App（iOS/Android）打包上线

App 的打包和上线最复杂，涉及原生环境、证书、签名和应用商店审核。

准备工作

• DCloud 开发者账号：完成实名认证。
• Android 证书：创建 .keystore 文件，推荐在 HBuilderX 中一键生成，务必妥善保管证书和密码。
• iOS 证书：需要付费的 Apple Developer Program 账号，在 Apple Developer 网站创建 App ID、Distribution Certificate 和 Provisioning Profile。

配置 manifest.json

打开 manifest.json，切换到“App基础配置”，获取 uni-app AppID，填写应用名称、版本号、版本码（每次更新必须递增），配置图标、模块和权限。

云打包

在 HBuilderX 中，点击“发行” -> “原生App-云打包”。

• Android 打包：选择“使用自有证书”，上传 .keystore 文件并填写密码，选择 CPU 类型，点击打包后下载 .apk。
• iOS 打包：选择“正式版”，上传发布证书（.p12）和描述文件（.mobileprovision），填写证书密码，打包后下载 .ipa。

应用商店上架

• Android 上架：注册各应用商店开发者账号，认证后创建应用，填写信息，上传 .apk 文件，提交审核。
• iOS 上架：使用 macOS 电脑和 Transporter 或 Xcode，登录 App Store Connect，创建 App 并填写元数据，上传 .ipa 文件，选择构建版本，提交审核。审核通过后发布。

遵循以上步骤，即可顺利完成 uni-app 多端打包上线。