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

简介：最近用vue-cli框架写安卓版APP，本来打算用Hbuilder打包成.apk文件即可，但发现配置起来复杂，还不如自己搭建环境，用cordova工具提供的命令在终端实现，下面介绍遇到的问题及解决。

一、打包过程

首先要有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文件了

二、问题

在手机上打开后灰屏，cordova打包的是www文件夹下的内容，也就是说，内容应该都在www文件夹下面，而我们的源代码要放到src下面去，vue-cil的index.html是在根路径下面的，所以需要修改打包配置。

首先，打开vue-cli项目的config下的index.js，将build里assetsPublicPath的值由'/'改为'./'

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

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