用cordova+vue-cli 打包成 android apk 過程和路徑問題

LucasTwilight 發布于2019-08-30 11:12 / 2305人閱讀

摘要：簡介最近用框架寫安卓版，本來打算用打包成文件即可，但發現配置起來復雜，還不如自己搭建環境，用工具提供的命令在終端實現，下面介紹遇到的問題及解決。

簡介：最近用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 瀏覽器環境下預覽會有問題，但在手機上可以成功預覽。

GPU云服務器云服務器打包apk cordova-android 封裝成apk java打包成jar

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114837.html

用cordova+vue-cli 打包成 android apk 過程和路徑問題

摘要：簡介最近用框架寫安卓版，本來打算用打包成文件即可，但發現配置起來復雜，還不如自己搭建環境，用工具提供的命令在終端實現，下面介紹遇到的問題及解決。簡介：最近用vue-cli框架寫安卓版APP，本來打算用Hbuilder打包成.apk文件即可，但發現配置起來復雜，還不如自己搭建環境，用cordova工具提供的命令在終端實現，下面介紹遇到的問題及解決。一、打包過程首先要有node環境，然后...

Forest10 2019-08-23 18:08 評論0 收藏0
vue+Cordova

摘要：系列安裝安裝搭建工程注自定義命名工程加入注自定義命名注意事項修改目錄下的執行時，會把打包內容指定到文件夾內，根據文件夾內容構建。添加平臺在加平臺前，需要修改的內容，包名的命名一般是，與申請微信時所用的包名對應。 vue-cordova vue2.0系列+Cordova 安裝vue-cli npm install -g vue-cli 安裝Cordova npm install -g c...

劉厚水 2019-08-23 18:40 評論0 收藏0