用cordova+vue-cli 打包成 android apk 过程和路径问题

简介：最近用vue-cli框架写安卓版APP，原本打算用Hbuilder打包成.apk文件便可，但发现配置起来复杂，还不如本身搭建环境，用cordova工具提供的命令在终端实现，下面介绍遇到的问题及解决。
1、打包过程
首先要有node环境，而后用 npm install -g cordova，

终端或powershell里，执行 cordova create resume com.dls myresume

其中resume是项目目录，com.dls是包名，myresume是应用程序的显示标题

1.执行 npm run build 以后，复制vue项目中 dist 下面的文件，到建立好的 resume 项目的 www 文件下
复制 到

2.将终端切换到建立的resume项目目录：cd resume
执行 cordova platforms add android --save 这里的平台名称能够是其余，我打包的是apk，因此使用安卓平台。

3.执行 cordova platform ls 来检查当前设置情况

4.执行 cordova requirements 来检查打包条件JDK、SDK、Gradle

jdk必须安装1.8*版本的，另外注意环境变量配置正确，必定要新建系统变量，命名成特定名称，不能直接把安装路径写在系统变量Path后面，例如Java JDK，新建系统变量名为JAVA_HOME，变量值为JDK的安装路径，而后在系统变量Path中，将 %JAVA_HOME%bin; %JAVA_HOME%jrebin追加到变量值后面。详情见 https://segmentfault.com/a/11...

5.执行 cordova build android 开始打包，初次打包须要下载Gradle配置文件，有点慢。

打包完毕会出现打包后生成的.apk文件路径

把路径粘到窗口回车就能够看见打包好的.apk文件了

2、问题

在手机上打开后灰屏，cordova打包的是www文件夹下的内容，也就是说，内容应该都在www文件夹下面，而咱们的源代码要放到src下面去，vue-cil的index.html是在根路径下面的，因此须要修改打包配置。
首先，打开vue-cli项目的config下的index.js，将build里assetsPublicPath的值由'/'改成'./'

而后，打开vue-cli项目的build下的util.js，将打包构建时提取css的公共路径往上加两层，详见图：

这样修改以后，在 npm run dev 浏览器环境下预览会有问题，但在手机上能够成功预览。