安卓开发 | 将Vue项目打包为app

这篇具有很好参考价值的文章主要介绍了安卓开发 | 将Vue项目打包为app。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

安卓开发 | 将Vue项目打包为app

一、写在前面✨

安卓开发 | 将Vue项目打包为app

大家好!我是初心,很高兴再次和大家见面。

今天跟大家分享的文章是 如何将Vue项目打包成apk,即安卓安装包 ,希望能帮助到大家!本篇文章收录于 初心 的 安卓开发 专栏。

🏠 个人主页:初心%个人主页
🧑 个人简介:大家好,我是初心,和大家共同努力
💕欢迎大家:这里是CSDN,我记录知识的地方,喜欢的话请三连,有问题请私信😘

事情是这样的:遇到一个需求,希望将Vue项目发布为apk,于是开始了解,下面是我整理的发布笔记,供大家参考。

二、Hbuilder X准备💕

为什么要使用Hbuilder X? 因为Hbuilder X提供了发布为app的功能,所以这里选择的是Hbuilder X。

2.1 Hbuilder X简介

Hbuilder X的宣言是:为极客、为懒人、为你,这是Hbuilder X的官网:Hbuilder X官网。

安卓开发 | 将Vue项目打包为app

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。

  • Hbuilder X的优点就是:

  • 一套代码,多端运行,可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序。

  • 代码实现简单,开发快速,官网提供很多组件,可以直接拿来用。

2.2 下载

HBuilderX下载地址:在HBuilder官网点击免费下载,下载最新版的HBuilder。

HBuilderX目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。

三、打包💕

3.1 获取dist目录

前面我们讲到如何使用 npm 命令将Vue项目打包,打包成功后生成了一个 dist目录 ,在这里发布为 app 也要用到这个 dist 目录。如果有不会打包的小伙伴可以参考我的这篇文章:将SpringBoot+Vue项目部署到服务器上。

3.2 新建5+app

打开Hbuilder X,点击文件,选择新建项目,选择5+app。

安卓开发 | 将Vue项目打包为app

安卓开发 | 将Vue项目打包为app

创建成功后,得到如下的文件目录:

安卓开发 | 将Vue项目打包为app

3.3 替换文件

将css,img,js,index.html文件删除,只留下unpackage和manifest.json文件:

安卓开发 | 将Vue项目打包为app

将dist目录下的所有文件拷贝到文件根目录下(我这里是test目录):

安卓开发 | 将Vue项目打包为app

安卓开发 | 将Vue项目打包为app

3.4 编写manifast.json文件

  • 基础配置

安卓开发 | 将Vue项目打包为app

  • 图标配置

安卓开发 | 将Vue项目打包为app

  • 模块配置

安卓开发 | 将Vue项目打包为app

  • 其他配置

其他配置根据自己的需求进行配置就好了。

将这些选项配置好之后,manifest.json文件就配置好了。

3.5 app云打包

点击原生app-云打包:

安卓开发 | 将Vue项目打包为app
安卓开发 | 将Vue项目打包为app

如果是第一次打包,需要下载一些插件,下载即可。

安卓开发 | 将Vue项目打包为app
安卓开发 | 将Vue项目打包为app

打包成功之后就会生成一个 apk 文件,大家就可以发送到手机安装啦!

安卓开发 | 将Vue项目打包为app

四、总结撒花😊

本文主要讲解了如何使用Hbuilder X将Vue项目打包成apk文件,用于app开发。😊

这就是今天要分享给大家的全部内容了,我们下期再见!😊

🏠 本文由初心原创,首发于CSDN博客, 博客主页:初心%🏠

🏠 我在CSDN等你哦!😍

安卓开发 | 将Vue项目打包为app文章来源地址https://www.toymoban.com/news/detail-448043.html

到了这里,关于安卓开发 | 将Vue项目打包为app的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【安卓开发】开源Notepad记事本APP项目(完整代码+说明文档)

    作业:记事本APP。要求: (1) 给出实现源程序,对源程序加以说明; (2) 给出屏幕运行结果的截图,运行结果含有个人特征; (3) 用word文档提交,文件名:班号-姓名-学号后3位-作业。 1.页面设计美观,可以正确显示数据(20分)。 2.实现数据保存、查询、修改和读取功能(20分

    2023年04月12日
    浏览(43)
  • vue h5 项目中与 app 安卓 or ios 进行交互 方式, h5与app交互

    vue h5 项目中与 app 安卓 or ios 进行交互 方式, h5与app交互 前端同学可以加我一起交流一起进步 案例描述:需求是 混合开发中,H5页面与原生app安卓或者ios交互(包括,调用app的方法,或者app调用 h5中定义的方法)从而实现交互 项目场景:开发帮助中心页面,帮助中心页面采

    2024年02月11日
    浏览(36)
  • react natvie app 安卓打包

    Android 要求所有应用都有一个数字签名才会被允许安装在用户手机上,所以在把应用发布到应用市场之前,你需要先生成一个签名的 AAB 或 APK 包(Google Play 现在要求 AAB 格式,而国内的应用市场目前仅支持 APK 格式。但无论哪种格式,下面的签名步骤是一样的)。Android 开发者

    2024年02月01日
    浏览(21)
  • 【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 uni-app官网 组件,无论是小程序还是vue,都是非常关键的。 现在单页面程序,主要的依据就是组件。 组件

    2024年01月20日
    浏览(44)
  • 【b站咸虾米】chapter3_vue基础_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 目录 三、vue基础 3.1 vue介绍与传统js的差异化  3.2 模板语法 3.3 data属性 3.4 条件渲染  3.4.1 v-if和v-else 3.4

    2024年01月21日
    浏览(53)
  • uniapp离线打包安卓APP全过程

    1、首先就是下载Android Studio,官方下载 就好了。 2、然后就是使用 HBuilderX 离线打包,生成本地打包App资源。 打包好的文件路径在unpackageresources__UNI__XXX,这里的这个__UNI__XXX就待会需要的。 3、再准备HBuilder最新的SDK下载好 原生开发者支持,点击 和彩云 , 提取码: LE9L; 如果此链接

    2023年04月08日
    浏览(41)
  • 安卓App生成签名证书,uniapp生成自有证书打包

    uniapp安卓打包生成自有证书,签名。从HBuilderX3.2.0及以上版本开始支持服务器生成证书(推荐这种方法),服务器生成一键操作,比较简单。自己一步一步操作相对还是比较麻烦的。 服务器生成的证书绑定应用appid,即每个appid会各自生成证书 服务器生成的证书会自动填写证

    2023年04月08日
    浏览(28)
  • uni-app离线打包安卓apk

    记录一下打包apk的过程: 参考:uni-app离线打包官网地址 2-1.遇见问题 1. 加载.idea和.gradle失败, 解决: File → Project Structure 重新构建: File → Sync Project with Gradle Files 安卓结构: Project → Android 登录开发者中心选择需要打包的应用→各平台信息→查看或新增安卓打包信息 这里

    2024年04月17日
    浏览(55)
  • UNI-APP安卓本地打包详细教程(保姆级)

    uni-app 官方文档地址   原生开发者支持 1、Android Studio 下载地址:Android Studio官网 OR Android Studio中文社区 2、最新版的HBuilderX 3、App离线SDK下载:最新android平台SDK下载 4、3.1.10版本起需要申请Appkey, 申请请参考 点击进入 Android Studio官网 或者 Android Studio中文社区 点击 Downl

    2024年04月23日
    浏览(54)
  • 记录--UNI-APP安卓本地打包详细教程(保姆级)

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 uni-app 官方文档地址 原生开发者支持 1、Android Studio 下载地址:Android Studio官网 OR Android Studio中文社区 2、最新版的HBuilderX 3、App离线SDK下载:最新android平台SDK下载 4、3.1.10版本起需要申请Appkey,申请请参考

    2023年04月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包