vue项目打包h5教程

Vue 项目打包 H5 教程

使用 HBuilder X 将 Vue 项目打包为 H5 应用，一步步带你完成云打包。

工具准备

• HBuilder X：下载并安装最新版

操作步骤

1. 编译 Vue 项目

   • 在终端执行 npm run build 或 yarn build，生成 dist 文件夹

2. 新建 H5 项目

   • 打开 HBuilder X，新建一个 H5 项目
   • 将 dist 文件夹中的 所有文件 复制到新建项目的根目录，不要改动其他文件

3. 配置 manifest.json

   • 打开 manifest.json，获取或填写 APK ID

4. 配置权限

   • 如果项目仅用于浏览且无需获取安卓底层权限，可以删除所有默认权限
   • ⚠️ 注意：包含通讯录权限需要认证，请谨慎配置

5. 云打包

   • 点击菜单栏 发行 → 云打包（首次使用需下载插件）
   • 填写打包信息，点击 开始打包
   • 等待控制台输出日志，打包完成后即可下载

参考截图