vue3中 打包成apk(android)

本文仅演示的是打包成android 版本的apk

一、打包vue3项目

1、打包

        通过打包命令将vue3项目打包成一个dist文件夹

注意:一般的打包命令为npm run build,特殊设置的修改一下打包命令 

2、解决打包后的文件的白屏问题。

     有时打包后的文件运行出现白屏问题,可能是绝对路径导致的,在vite.config.js文件中配置base:'./'

 图一  解决白屏问题

二、打包成apk

1、创建“5+App”项目

     在hbuilderx 中新建项目,选择“5+App”,然后填写项目名称,点击底部的"创建"按钮,步骤如下图:

图二  创建 5+app项目

2、打包文件移动

  将打包的dist中的文件全部复制到新建图一的根目录中

3、生成apk文件

点击顶部 "发行",选择 "原生App-云打包",具体内容如下,之后静静等待打包成apk

 图三  打包apk 步骤

三、生成apk

        生成apk文件,然后将apk文件安装到手机上进行运行,测试一下运行结果

### 使用 Android Studio 将 Vue.js 项目打包 APK 文件 #### 准备工作 为了使 Vue.js 项目能够在 Android 设备上运行,首先需要将其转换为适合移动应用的形式。这通常意味着先将 Vue 应用构建为静态资源 (HTML, CSS 和 JavaScript),再嵌入到一个原生应用程序容器中。 #### 构建 Vue.js 项目 通过执行 `npm run build` 命令来创建生产环境下的优化版本的应用程序[^1]: ```bash npm run build ``` 此操作会生一组可以在任何 Web 浏览器中加载的静态文件。这些文件位于项目的 `/dist` 目录下,并且构了最终发布的前端部分。 #### 创建 Cordova 或 Capacitor 项目 由于直接利用 Android Studio 对 Vue.js 进行打包并不常见,推荐的方法是采用 Apache Cordova 或者 Ionic 的 Capacitor 来作为中介层。这两种框架允许开发者轻松地将现有的网页封装可以安装于智能手机上的独立 APP。 对于 Cordova 用户来说,在终端内输入以下指令初始化一个新的 Cordova 工程并添加 Android 平台支持: ```bash cordova create MyApp com.example.myapp MyApp cd MyApp cordova platform add android ``` 而对于偏好 Capacitor 的开发人员,则应按照官方文档指导完相似的过程。 一旦选择了合适的工具链之后,就可以把之前由 Vue CLI 生产出来的 dist 文件夹复制粘贴至新建立好的 Cordova/Capacitor 项目的 www 文件夹里替换默认内容。 #### 导入到 Android Studio 中 当所有的准备工作都完后,打开 Android Studio 并导入对应的平台目录(即 Cordova 的 platforms/android 或 Capacitor 的 android),这样就能像对待普通的安卓工程一样对其进行调试和签名处理了。 #### 编译与发布 APK 最后一步是在 Android Studio 内选择 Build -> Generate Signed Bundle / APK... 路径来进行正式版 apk 的制作流程。遵循向导提示设置好 keystore 及其他必要的参数后即可获得可用于分发给用户的 .apk 安装包。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值