安卓开发 | 将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项目(完整代码+说明文档)

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

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

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

    vue h5 项目中与 app 安卓 or ios 进行交互 方式, h5与app交互

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

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

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

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

    【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日
    浏览(43)
  • 【b站咸虾米】chapter3_vue基础_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

    【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日
    浏览(398)
  • uniapp离线打包安卓APP全过程

    uniapp离线打包安卓APP全过程

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

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

    安卓App生成签名证书,uniapp生成自有证书打包

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

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

    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日
    浏览(14)
  • UNI-APP安卓本地打包详细教程(保姆级)

    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日
    浏览(13)
  • 记录--UNI-APP安卓本地打包详细教程(保姆级)

    记录--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日
    浏览(13)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包