uniapp 通过 cli publish --platform h5 --project jiuniu_uni打包h5的完整流程是什么

请问使用uniapp通过命令行cli publish --platform h5 --project jiuniu_uni打包H5的完整流程是什么？需要哪些前置步骤和配置？打包后的文件存放在哪里？

2 回复
  1. 安装依赖：npm install
  2. 打包H5：npm run build:h5
  3. 发布：cli publish --platform h5 --project jiuniu_uni
  4. 生成dist文件夹，上传到服务器即可

在 UniApp 中通过 CLI 打包 H5 项目的完整流程如下：

  1. 环境准备：

    • 确保已安装 Node.js（建议 14.x 或更高版本）
    • 全局安装 @vue/cli：npm install -g [@vue](/user/vue)/cli
    • 安装 HBuilderX CLI：npm install -g @dcloudio/vue-cli-plugin-hbuilderx

  2. 项目配置：

    • 在 manifest.json 中配置 H5 平台相关设置（如路由模式、基础路径等）
    • 检查 pages.json 中的页面配置是否符合 H5 需求

  3. 打包命令：

    npm run build:h5

    或使用完整 CLI 命令：

    npx uni build --platform h5 --project jiuniu_uni

  4. 输出结果：

    • 打包完成后会在项目根目录生成 dist/build/h5 文件夹
    • 该文件夹包含所有静态资源文件，可直接部署到 Web 服务器

  5. 部署注意事项：

    • 若使用 History 路由模式，服务器需配置 URL 重写
    • 静态资源路径问题可通过配置 publicPath 解决

完整示例 package.json 脚本配置：

{
  "scripts": {
    "build:h5": "uni build --platform h5 --project jiuniu_uni"
  }
}

常见问题处理：

  • 打包失败时检查依赖完整性：npm install
  • 路径问题可在 manifest.json 的 h5 配置中调整 publicPath
  • 跨域问题需配置服务器代理或后端 CORS

整个过程约需 1-5 分钟，具体时间取决于项目规模和网络状况。

回到顶部