Vue CLI 3 项目如何打包成安卓 APK 应用

Vue CLI 3 项目打包成安卓 APK 的完整流程（图文教程）

🧱 一、前期准备

✅ 项目环境

  • Vue CLI 3 项目（已完成开发）
  • Node.js / npm 环境
  • HBuilderX（推荐使用官方最新版本）
  • 一台安卓手机用于安装测试

📦 二、打包 Vue 项目（解决路径问题）

Vue 项目默认构建时路径是绝对路径，直接打包会出现“白屏”问题。因此我们需要先修改项目的 vue.config.js 文件。

✏️ 修改 vue.config.js (没有就自己新建一个)

1
2
3
module.exports = {
  publicPath: './'
}

这一步的作用是将构建路径改为相对路径，确保资源能被正常加载。

🚀 运行构建命令

1
npm run build

构建完成后，会生成一个 dist 文件夹，里面就是你打包好的 HTML、JS、CSS 文件。

🧰 三、创建 HBuilderX 项目并替换资源

1. 打开 HBuilderX，创建一个 5+App 项目

路径：文件 → 新建 → 项目 → 5+App → uni-app 项目

可以随便命名一个项目，作为 Vue 项目的壳。

2. 替换资源文件

将 dist 目录中的所有内容，复制粘贴到 HBuilderX 项目的根目录中（覆盖原有内容）。

保证 index.html 在根目录下，其余静态资源在相应子目录中。

⚙️ 四、配置 manifest.json

manifest.json 是 HBuilderX 打包 Android 应用的核心配置文件。

打开该文件，主要配置如下：

基本信息设置

配置项 示例
应用名称 My Vue App
应用标识 com.example.vueapp
版本名称 1.0.0
版本号 100
应用图标 使用 512x512 的 PNG 格式图标
  • （图片仅支持 png 格式）

权限设置（按需配置）

比如网络权限、文件读写权限等。HBuilderX 默认已经处理好了大部分常用权限，一般无需额外配置。

📲 五、打包生成 APK

1. 打开菜单：发行 → 原生 App-云打包

  • 勾选 Android 平台
  • 登录 DCloud 账号
  • 上传应用图标、启动页（可选）

2. 开始打包

点击【打包】按钮，等待系统云端打包完成。

几分钟后，你会得到一个 .apk 文件，打包完成，可以在手机上面安装自己的App了

✅ 六、安装测试

将打包好的 APK 安装到安卓设备上，正常打开即可访问你的 Vue 应用。

🧩 常见问题排查

问题 原因与解决方案
打开 App 白屏 publicPath 未正确设置为 './'
无法加载图片/资源 资源路径使用了绝对路径，建议使用相对路径
打包失败 检查 manifest.json 图标格式和权限设置是否完整
页面样式错乱 注意 uni-app 与 Vue 项目样式是否冲突

🧠 总结

将 Vue CLI 项目转为安卓 App 的流程其实不复杂，关键点如下：

  1. 设置好相对路径，避免资源加载错误
  2. 使用 HBuilderX 创建壳项目，粘贴打包文件
  3. 配置 manifest.json，完成打包流程

🔗 推荐阅读

如果这篇文章对你有帮助，别忘了点赞、收藏或者转发支持一下！
如有其他问题，也欢迎评论区留言，我会第一时间回复～