使用 HBuilderX 打包 app

目前在作 网站的 app ,是使用 vue 框架写的，作完了web 端，须要打包成 app ,放到网上供用户下载，可是本人之前没有打包过app,在网上找了一些资料，也问了一下同事，竟然成功了，如今将整个打包过程记录下来，若是有其余人须要相似的需求，能够参考以下：

1. 若是你使用的 开发工具不是 HBuilderX ，那须要先下载这个软件（若是使用的编辑器是这个软件，就不须要下载了），下载地址以下：

 

2. 打开 HBuilderX ，选中菜单中的 ：文件--->新建--->项目

 

3. 选择项目类型，新建项目名称，选择项目路径

 

4. 而后在 HBuilderX 项目文件中，你能够看到一个项目文件以下

 

5. 对我原来的项目进行打包： npm run build，会在  m.1zhanche项目下获得一个dist 文件夹，文件夹中有两个文件，直接copy 放到 myApp 中就能够了

 

 

6. 把 dist 文件夹里的文件  static 文件夹和index.html 原封不动的拷贝放到 myApp 中

 

7. 获得以下状态：

 

8.  配置打包文件  manifest.json,直接点击便可

8.1 基础配置：

 

8.2  图标配置：

 

8.3 启动图配置：这里有 iphone,ipad，android 选项，我这里只须要android，因此其余的我就不配置了

 

8.4  sdk 配置：这里有地图，分享，支付登陆，推送等，按照实际的东西配置就能够了，我这里暂时不考虑，因此不涉及，因此我都没有配

 

8.5 模块权限配置，这里有默认选项，我不知道是什么意思，因此我没有动，就按默认的执行

 

8.6 源码视图：听说这里能够配置app 顶部的颜色，我如今还不会，因此不动，使用默认的东西

 

9. 点击发行----->云打包

9. 按照如下选择

 

10 点击上图中的打包

 

11. 在手机中如今安装过程：

12. 点击 myApp 打开：

 

 

这是由于 项目中的 ajax 请求没有请求到数据，在app 中时，须要使用绝对路径，在项目中进行如下变动

 

从新打包后：

下载再次安装完成，打开app 的效果以下：OK 了

以上，为本次打包的所有过程