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
        },

 "plus" : {  
"statusbar" : {
            //应用可视区域到系统状态栏下透明显示效果
            "immersed" : true
        },

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

 

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

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

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

 

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