Vue webapp项目经过HBulider打包原生APP（vue+webpack+HBulider）

Vue webapp项目经过HBulider打包原生APP

一、webapp项目已经经过vue-cli搭建的脚手架写好了，而后经过webpack打包成一个部署文件list，以下：

二、打开HBulider,打开目录，选择这个list，项目名称本身更改。（或者直接新建一个app项目，而后把里边的unpackage和manifest这两个保留下来，其余的替换成本身dist文件里边的内容）

这个时候是web项目，须要改成APP项目（若是直接新建的app，请忽略此步）

更改前：

更改后： 

三、在HB中打开这个dist，能够看到有一个manifest.json的文件。这个文件是用来配置应用信息的。入口文件必定要对应好，我用VUE写的单页应用，因此就一个index.html。

而后配置图标

按着本身项目的要求配置就好了，HB下面列举的很详细。

四、接下来能够经过手机用USB线与电脑链接进行真机调试。（必须经过USB线链接才能够，人家HB不支持什么经过无线链接的方式）windows电脑不用说了，能够用一些360助手什么的就能够解决了。若是你的手机是安卓的，在苹果电脑下面就没那么好搞了。后来经过百度加本身的摸索也搞出来。方法就是在苹果电脑上下载一个使用 Android File Transfer这个软件。要收费时，点击试用就能够了。手机上须要打开usb调试，而后选择 内置光盘 就能够与苹果电脑链接了。手机本身也有提示（真的很暖心）

链接成功以后，就能够进行真机调试了。

注：网上不少说本身的VUE项目项目打开一片空白，记得改一下config下面的index.js中bulid模块导出的路径。由于index.html里边的内容都是经过script标签引入的，而你的路径不对，打开确定是空白的。先看一下默认的路径。

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,

assetsPublicPath默认的是  ‘/’  也就是根目录。而咱们的index.html和static在同一级目录下面。  因此要改成  ‘./ ’

另外还须要注意一点。src里边router/index.js路由配置里边默认模式是hash，若是你改为了history模式的话，打开也会是一片空白。因此改成hash或者直接把模式配置删除，让它默认的就行 。

// mode: 'history'  // 默认hash

五、若是真机测试没有问题。那么就能够真正的进行打包成APP了。

打包成功后，能够经过手动下载，或者直接打开下载目录里边下载好的。把这个xxxx.apk文件经过qq或者其余的发送到你的手机上，点击安装。就能够了。

六、最后，展现一下手机上的效果。