Vue-cli3打包成apk首页空白问题解决

最近在学习vue，做了一个小demo，还没有完全做完，想着先在手机上跑跑效果。本来以为是件很简单的事情，结果还是费了我一整天的时间。

首先，vue打包成apk，我用的是网上比较常见的方法，使用hbuilder来打包，首先在vue里运行npm run build生成dist文件夹，然后把dist文件夹拖到hbuilder里，点转换成移动app，然后再点击发行->云打包-打原生安装包，选择android打包即可。打包过程不是很难，按照网上的教程很容易生成一个apk，但是问题来了，这样直接生成的apk在手机上运行的时候首页是空白。

首页空白的问题如何解决呢？网上搜索出来的结果很多都是vue-cli2的解决方法，在config下的index.js里将assetsPublicPath改为“./”即可。但是vue-cli3里没有config这个目录，我们需要在项目的根目录下新建一个vue.config.js，在modules.exports里加上publicPath: "./"这句配置，就相当于上面assetsPublicPath的配置。但是我按照这样配置后首页依旧是空白，但是当我再次点击首页底下的tab时，内容出来了，但是其它任何东西都点击不了了。。感觉还是哪里有问题，看到有一篇博客好像说过路由的模式也有影响，于是把路由里的mode:history这句注释掉后，手机上跑终于正常了。

第一次玩vue打包apk，虽然遇到了很多问题，但最终还是顺利的解决，特此记录。