uniapp如何将应用编译为web版本

我在使用uniapp开发跨平台应用，现在需要将应用编译为web版本发布到网站上，但不太清楚具体怎么操作。请问应该如何配置和编译？需要特别注意哪些兼容性问题？有没有官方推荐的优化方案？

使用HBuilderX工具，在顶部菜单选择“发行”->“网站-PC Web或手机H5”，即可将uni-app项目编译为Web版本。

在 UniApp 中，将应用编译为 Web 版本非常简单，只需通过 HBuilderX 工具或命令行操作即可。以下是详细步骤：

方法一：使用 HBuilderX（推荐）

打开项目：在 HBuilderX 中打开你的 UniApp 项目。
选择发行平台：
- 点击顶部菜单栏的发行 > 网站-PC Web 或手机 H5。
- 如果目标为 PC 端，选择“网站-PC Web”；若为移动端，选择“手机 H5”。
配置参数（可选）：
- 在弹出窗口中可设置公共路径（如 ./ 或 CDN 地址）、标题等。
- 如需路由模式（如 History 模式），在 manifest.json 的 h5 节点下配置 router.mode。
开始编译：点击确认后，HBuilderX 会自动编译并生成文件到 /unpackage/dist/build/h5 目录。

方法二：使用命令行

确保已安装 Node.js，并在项目根目录执行：
```
npm run build:h5
```
或针对特定平台：
```
npm run build:web
```
编译完成后，文件将输出到相同目录。

关键配置（在 `manifest.json` 中）：

{
  "h5": {
    "publicPath": "./",
    "router": {
      "mode": "hash" // 或 "history"（需服务器支持）
    }
  }
}

注意事项：

路由模式：默认使用 Hash 模式。若用 History 模式，部署时需服务器配置支持（如 Nginx 的 try_files）。
跨域问题：在开发阶段可通过 devServer.proxy 配置代理；生产环境需后端配合。
平台差异：部分原生功能（如摄像头）在 Web 端可能受限，需用条件编译处理：
```
// #ifdef H5
console.log('仅在 H5 平台执行');
// #endif
```

部署：

将 /unpackage/dist/build/h5 内的文件上传至 Web 服务器即可访问。

通过以上步骤，即可快速将 UniApp 应用编译为 Web 版本。

回到顶部