vue 项目通过 HBuilderX 打包成 apk 移动安装包教程

在使用vue写一些移动端(安卓端)网页的时候 总感觉在用户体验方面不太好,原因有几点,

1.首先在用户需要访问的时候必须去输入框填写你URL地址,像一些内部用的系统一般 网站名也不太容易记,而且不想PC端的浏览器 方便输入。

总之就是懒的去输入,程序员的通病嘛 就是能用简单的绝不搞复杂的,那就废话不多说了,现在使用vue 写页面越来越广泛,如果在找工作的时候说自己不会vue,甚至不知道vue 是什么的  那就真的是让人笑掉大牙了。

其实为什么使用的人这么多,当然是有优点的了,首先在通过vue项目打包成 APP 然后进行使用  不乏也是一种乐趣,也解决掉了一些常见的手机端页面的问题,而且他的学习成本低简单易学。下面就让我们进入正题。

1.首先你要准备一个vue的项目  然后进行配置  找到目录 config-->index.js里面的 build:下的 assetsPublicPath="/"  修改为

assetsPublicPath="./" 然后进行打包  npm run build

他会生成一个 dist目录   准备好以后备用

2.打开HBuilderX  新建一个项目  选择5+APP  起一个项目名称点击创建

3.这时候你会看到你的项目上有一个5+的符号如:

4.将vue 打好包的项目复制到该项目下 将刚创建好的项目下的index.html 替换掉 效果如下

5.可以将 没用的文件删掉 如下:

6.点击manifest.json  可以配置一下基本

打开源码视图,在 plus 下 添加一个json代码

"statusbar" : {

//应用可视区域到系统状态栏下透明显示效果

"immersed" : true

},


7.现在就是打包了点击发行后会有一个原生APP云打包

8.出现APP云端打包配置 直接使用 Android  使用 DCloud公用证书,可以把广告去掉:如图

9.坐等打包完成 打包完成需要时间,请耐心等候,打包完成后会给你生成一个下载地址,要注意这个下载地址是有5次限制的

请先下载完成后保存下来安装包,可以上传到服务器上,日后可以无限制下载了。

​​

以上就是整个的操作教程,简单易学,方便快捷 你值得拥有,如果对这个小教程还感兴趣,或者有不懂地方欢迎点赞和留言

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,895评论 1 4
  • 首先非常感谢kevinz分享的文章《springboot+gradle+vue+webpack 组合使用》,这文章...
    YU_XI阅读 3,499评论 0 7
  • ☞☞ 个人主页欢迎访问 ☜☜ 最近在开发一个移动端项目微信公众号,前端框架我用当然是Vue,期间遇到了很多问题,在...
    苏日俪格阅读 7,843评论 7 51
  • 起因 前公司商城App项目使用的是H5开发,有微信公众号、Ios和Android三个版本,H5版本是自己写的一套框...
    低调的喃喃阅读 64,065评论 11 50
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,142评论 0 1