uniapp项目 cli打包的具体步骤和注意事项

“各位大佬好！最近在用uniapp开发项目，准备用cli方式打包，但不太清楚具体的操作步骤和需要注意的地方。有没有详细一点的教程或者经验分享？比如环境配置、命令参数、常见报错处理这些。求指教，万分感谢！”

2 回复
  1. 安装HBuilderX CLI；
  2. 执行命令：cli publish --platform 平台（如h5、mp-weixin）；
  3. 注意manifest.json配置正确，如AppID、版本号；
  4. 确保依赖完整，避免打包失败；
  5. 不同平台需单独配置和打包。

UniApp CLI 打包步骤如下，分为 H5、小程序、App 三个平台：

一、H5 打包

  1. 构建命令：

    npm run build:h5

    或

    uni build -p h5

  2. 输出目录：
    生成 dist/build/h5 目录，可直接部署到服务器。

  3. 注意事项：

    • 检查 manifest.json 中的 H5 配置（如路由模式、publicPath）。
    • 若部署到子目录，需配置 publicPath 为相对路径（如 ./）。

二、小程序打包（以微信为例）

  1. 构建命令：

    npm run build:mp-weixin

    或

    uni build -p mp-weixin

  2. 输出目录：
    生成 dist/dev/mp-weixin，用微信开发者工具导入此目录。

  3. 注意事项：

    • 在 manifest.json 中配置小程序 AppID。
    • 检查分包配置和页面路径是否正确。
    • 上传前需在开发者工具中设置合法域名。

三、App 打包

1. 云端打包（推荐）

  • 步骤：

    1. 在 HBuilderX 后台生成 App 资源包（发行 → 原生 App-云端打包）。
    2. 选择证书（测试用公共证书，正式需自签）。
    3. 勾选模块（如地图、推送等）。

  • 注意事项：

    • 需配置 manifest.json 中的 App 模块权限。
    • 检查图标和启动图尺寸是否符合要求。

2. 本地打包

  • 步骤：

    1. 生成资源包：
      npm run build:app-plus
    2. 使用 Android Studio/Xcode 导入原生工程并打包。

  • 注意事项：

    • 需配置原生环境（复杂，非必要不推荐）。

通用注意事项

  1. 环境检查：

    • 确保 Node.js 版本 ≥ 12，CLI 版本最新。
    • 安装依赖：npm install。

  2. 路径与资源：

    • 静态资源建议放 static 目录，避免路径错误。
    • 代码中避免使用绝对路径。

  3. 环境变量：

    • 使用 process.env.NODE_ENV 区分开发/生产环境。

  4. 常见问题：

    • 打包白屏：检查路由模式或资源加载路径。
    • 样式丢失：确认 scss/less 编译器正常。

按平台执行对应命令后，根据输出提示处理即可。如有具体报错，可结合日志进一步排查。

回到顶部