uniapp 离线打包h5如何实现

请问在uniapp中如何实现H5的离线打包功能？我在开发过程中需要将H5资源打包成离线版本，方便在没有网络的情况下使用，但不太清楚具体的配置方法和步骤。能否详细说明下需要修改哪些配置文件，以及如何生成离线可用的H5包？另外，是否需要特殊的插件或依赖？

2 回复

uniapp离线打包H5需使用HBuilderX工具。步骤如下：

  1. 打开项目，点击“发行”->“网站-H5手机版”；
  2. 配置打包参数，选择“离线打包”；
  3. 生成资源文件，部署到服务器即可。

注意：需配置manifest.json中的基础路径。


在 UniApp 中，H5 平台默认生成的是在线资源，但可通过以下步骤实现离线打包，将资源部署到本地服务器或 CDN，确保无网络时仍可访问：

实现步骤

  1. 生成 H5 资源
    在 H5 平台配置中，设置资源路径为相对路径（如 ./），然后打包生成 dist/build/h5 目录。

    // 在 manifest.json 的 H5 配置中添加
{
  "router": {
    "mode": "hash",
    "base": "./"
  }
}

  2. 部署资源

    • 将 h5 目录中的所有文件上传至服务器或本地 Web 服务（如 Nginx、Apache）。
    • 若需完全离线，可将资源部署到本地服务器（如使用 http-server 或嵌入到移动应用 WebView 中）。

  3. 配置服务器
    确保服务器支持 History 路由模式（若使用）或 Hash 模式，并设置所有路由回退到 index.html，避免刷新页面 404。

  4. 注意事项

    • 避免使用绝对路径或在线资源（如图片、API 请求需调整为本地或内网地址）。
    • 测试离线访问：关闭网络，验证页面加载和功能正常。

示例代码（服务器配置）

若使用 Nginx，添加以下规则：

location / {
  try_files $uri $uri/ /index.html;
}

通过以上步骤，即可实现 H5 的离线打包与部署。

回到顶部