使用hbuilderx将vue项目打包成App

一、打包vue web项目

1、修改build的配置

在vue-cli(2.9.x版本)下，修改config目录下index.js里面的build.assetsPublicPath(默认是/，这里在/之前加了个英文状态下的点符号)

2、运行yarn run build（我用的是yarn包管理器，如果是用npm，则运行npm run build）

打包后的静态资源文件之后会用到。

二、使用hbuildx打包成App

1、先在dcloud注册个开发者账号：

https://dev.dcloud.net.cn/

2、下载hubilderx App开发版本（https://www.dcloud.io/hbuilderx.html），打开hbuilderx，点击左下角登录账号。新建h5+ App项目：

 

3、删除vue-app项目里面的css、img、js文件夹；将打包后的vue静态资源文件夹dist里面的文件拷贝进app项目里：

 

4、打开app的配置文件mainfest.json

 

    4.1、图标配置；安装到手机上后显示的app图标。可以选择一个分辨率较大的图片，然后点击自动生成所有图标并配置。

    4.2、启动图配置；

    取消勾选：启动界面显示等待雪花

    4.3、SDK配置；

    根据app项目需求，选择相应的第三方SDK（一般需要去相应的SDK官网申请key）

    4.4、模块权限配置；

    app需要用到的权限，会询问用户打开这些权限。勾选相应的权限模块即可。

    

5、云打包Android app

5.1、选中需要打包的项目名，点击工具栏的“发行”，选择”原生App-云打包“.

5.2、在弹出的框中，选择”使用DCloud公用证书“（也可以使用自有证书，需要查看官网说明），取消勾选 ”广告联盟“ 和 ”换量联盟“，点击最底部的”打包“按钮：

 

 

 

这是我打包的一个测试项目app（一个音乐app，歌曲来自网易云音乐）：vue-music-app （提取码：zmtr ）