用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 瀏覽器環境下預覽會有問題，但在手機上能夠成功預覽。