Vue 项目利用 HBuilderX 打包 APP 流程

简介: Vue 项目利用 HBuilderX 打包 APP 流程

想要将 Vue 打包成 App,要借助一些插件工具,例如:Electron、Cordova 等,或者直接利用开发工具,例如:Android Studio、HBuilderX 等。本文的目的是带大家通过 HBuilder 开发工具对 Vue 项目进行打包。

数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

Vue权限系统案例

个人博客地址

一、大致流程描述

项目整体使用 Vue+HbuilderX(或者Hbuilder) 开发

使用 Vue 来实现基本页面跳转,增删改查等 app 基本功能,

当需要使用到 app 原生功能则使用一些相关的 UI 框架(如:mui、nutui 等)

真机调试

最后通过HbuilderX将vue项目打包成app包

二、对 vue 项目进行打包

2.1 打包前,将 vue.config.js 文件中 base 路径修改为 ./,如图:

fbac59c507314bb48397836db36878ee.png

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 目录如图

1092362191994aafa97a9e3ad32dff1f.png

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

52a187cfc0654d918c4083649dd38fc3.png

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

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

  8. 720cf98995d54a8293dd47a8b66dace2.png
  9. 根据测试结果,做代码微调
  10. HBuilderX软件,发行->原生App-云打包,进行 mainfest.json 文件配置,最后按提示与指南进行打包
  11. 501ad78e388945a4b44e3a6ebbbf23c3.png
  12. manifest.json 配置界面如下:
  13. 86e2bb5f43ae4f61996d7337d487f886.png
  14. apk安装到手机:在HBuilderX软件中,打开unpackage->release->apk,右击apk文件安装到手机
  15. 10ef62c50b5743f7983f3cff760aedf6.png

附:使用 Cordova 打包步骤

  1. 安装 Cordova
npm install -g cordova

创建 Cordova 项目

cordova create my-app

进入项目目录

cd my-app

添加平台,如 Android

cordova platform add android

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

npm run build

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

p -r dist/* www/

构建并运行 Cordova 项目

cordova build android
相关文章
|
2月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
160 2
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
697 1
|
1月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
18天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
56 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
21 7
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
2月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
37 6
|
1月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
2月前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
71 3