Vue 项目利用 HBuilderX 打包 APP 流程

前言

H5打包App通常是指将基于HTML、CSS和JavaScript的移动端网页应用，通过一些工具或框架转化为原生的iOS平台、Android平台可执行文件，以在手机设备上运行。
想要将 Vue 打包成 App，要借助一些插件工具，例如：Electron、Cordova 等，或者直接利用开发工具，例如：Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。

一、大致流程描述

1. 项目整体使用 Vue+HbuilderX(或者Hbuilder) 开发
2. 使用 Vue 来实现基本页面跳转，增删改查等 app 基本功能，
3. 当需要使用到 app 原生功能则使用一些相关的 UI 框架（如：mui、nutui 等）
4. 真机调试
5. 最后通过HbuilderX将vue项目打包成app包

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客

二、对 vue 项目进行打包

2.1 打包前配置

将 vue.config.js 文件中 base 路径修改为 ./，如图：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  base:'./', // 如果直接默认打包，打包后静态资源默认为 “/” ，这样会导致找不到静态资源，最后的apk安装以后白屏
  plugins: [
    vue(),
    vueJsx(),
  ],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

如果直接默认打包，打包后静态资源默认为 “/” ，这样会导致找不到静态资源，最后的apk安装以后白屏

2.2 打包

将 Vue 项目打包，执行如下命令：

npm run build

打包后的 dist 目录如图

打包以后的index.html文件根目录为 ”./“，其他assets文件夹中的js文件中的静态资源引用都会统一变成 ”./“，可以正确访问。其中index.html如下

三、打包移动端 app

使用 HBuilderX 将 dist 静态文件打包为移动端 app

1. 下载 HBuilderX最新版本，HBuilderX 是绿色软件，免安装
2. 在DCloud开发者中心完成账号注册与开发者认证
3. 创建5+App项目，默认文件结构如下
4. 进入项目文件夹目录，删除文件夹css、img、js，文件index.html，将打包后的 dist 目录中文件拷贝到此文件夹，如下
   
5. HBuilderX软件，运行->运行到内置浏览器，进行测试，测试结果如下
   

   根据测试结果，做代码微调

6. HBuilderX软件，发行->原生App-云打包，进行 mainfest.json 文件配置，最后按提示与指南进行打包
   
   manifest.json 配置界面如下：
7. apk安装到手机：在HBuilderX软件中，打开unpackage->release->apk，右击apk文件安装到手机
   

四、封装后的app与原生的有什么区别？

4.1 开发模式不同

• h5封装APP：又称web app，是一种框架型APP开发模式。
• 原生开发APP：又称Native App，开发针对苹果IOS封闭、Android开源等不同的手机操作系统用不度同语言进行开发。

4.2 优势不同

• h5封装APP：

  • 开发方式拥有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份知构成。
  • H5的开发基于后台由前端研发，开发时间时间短。
  • 只要研发更新完毕，用户只需重新进入一次页面，即可看到最新的页面。
  • 能够与网站数据同步更新并适配目前所有的系统（安卓、IOS）

• 原生开发APP：

  • 可以直接对接所有手机端口相应条件满足下甚至可以获得手机最高权限，对于延伸控制升级发展有着天然优势。
  • 手机的适配度较高有灵活的的端口匹配。
  • 运行的处理能力较快，视频，图形等处理比较完美。
  • 后期的延伸发展端口局域性较多。
  • 可上架主流应用商城，提高平台下载量、使用量、曝光量。

4.3 特点不同道

• h5封装APP：通过访问数据进行直接运作，像网页直接打开的方式直接访问，这种方式跟h5连接访问是一样的，所以封装的APP大多数也多由网页端h5系统封装而来。- 原生开发APP：运行的处理版能力较快，视频，图形等处理比较完美。手机的适配度较高有灵活的的端口匹配。

4.4 开发成本不同

• h5封装APP：将开发好的h5网站封装成APP只需要2分钟，支付100元的封装费用即可。有需求的小伙伴可以联系鹿客邦在线客服。
• 原生开发APP：需要有苹果IOS开发程序员，安卓Android开发程序员，根据功能复杂程度，需要花费1-5个月时间才能开发出来。

附：使用 Cordova 打包步骤

1. 安装 Cordova

   npm install -g cordova
   

2. 创建 Cordova 项目

   cordova create my-app
   

3. 进入项目目录

   cd my-app
   

4. 添加平台，如 Android

   cordova platform add android
   

5. 将 Vue 项目构建成可以部署的代码

   npm run build
   

6. 将构建后的代码拷贝到 Cordova 项目中

   p -r dist/* www/
   

7. 构建并运行 Cordova 项目

   cordova build android