uniapp 离线编译发布 h5 的具体步骤是什么

“在uniapp中离线编译并发布H5的具体步骤是什么？需要准备哪些环境和工具？是否有详细的配置说明或注意事项？”

2 回复
  1. 运行 npm run build:h5 生成 dist 目录
  2. 将 dist/build/h5 文件夹部署到服务器
  3. 配置服务器支持 history 路由模式
  4. 访问部署地址即可离线使用

UniApp 离线编译发布 H5 的步骤如下：

  1. 环境准备

    • 确保已安装 HBuilderX（官方 IDE）或配置好 CLI 环境（需安装 Node.js 和 npm）。
    • 检查项目依赖完整，运行 npm install（若使用 npm 管理依赖）。

  2. 配置 manifest.json

    • 在 HBuilderX 中打开 manifest.json 文件，进入 “H5 配置” 选项卡：
      • 设置 “基础路径”（publicPath），如 ./ 适应相对路径部署。
      • 勾选 “打包后压缩代码” 以优化体积。
      • 可选：配置路由模式（hash 或 history）。

  3. 执行离线编译

    • 方式一（HBuilderX GUI）：
      点击顶部菜单 “发行” → “网站-H5 手机版”，生成文件在 /unpackage/dist/build/h5。
    • 方式二（CLI 命令）：
      在项目根目录执行：
      npm run build:h5
      或（根据项目配置）：
      uni build --platform h5

  4. 部署 H5 文件

    • 将 /unpackage/dist/build/h5 目录下的全部文件上传至 Web 服务器（如 Nginx、Apache）。
    • 若使用 History 路由模式，需配置服务器 Fallback 到 index.html（避免 404）。

  5. 测试验证

    • 通过浏览器访问部署的 URL，检查功能、资源加载及路由是否正常。

注意事项：

  • 离线编译前确认代码无报错，可先运行 npm run dev:h5 本地调试。
  • 若涉及跨域接口，需在服务器端配置代理或 CORS。
  • 静态资源路径问题可通过 manifest.json 中的 publicPath 调整。

完成以上步骤即可发布 H5 应用。

回到顶部