Vue 2.0 + cordova 構建Android應用（一）

1、環境準備（Windows、Android）

一、官方安裝參考

包括Java、Android SDK 及相關環境變量配置

二、Node.js

安裝Node.js（主要是爲了使用npm安裝cordova、vue），當前選擇穩定版6.9.x LTS 便可

三、Android SDK

建議直接下載安裝Android Studio，當前版本2.2.2.0

選擇包含 Android SDK 的安裝包，安裝完畢後打開SDK配置路徑中的SDK Manager.exe，下載所需版本Android SDK Tool和對應SDK Platform，建議真機開發調試。

下載速度慢或沒法下載，則使用代理，配置以下，或可以使用其餘代理路徑

四、Cordova

參照官方指南首頁，安裝Cordova、配置已下載的SDK環境變量，並按照指南進行初步測試

cordova 相關命令參考：http://cordova.apache.org/doc...

注意命令中的各類默認設置

假設構建名爲cordovaApp的項目

cordova create cordova-app com.lxlazy.www.app cordovaApp
cd cordova-app
cordova platforms add android

命令行提示項目中已默認安裝 cordova-plugin-whitelist 插件。

檢查總體環境是否正確，注意查看提示

cordova requirements

建議使用真機調試，記得打開USB調試模式

cordova run

---

注意：首次使用時，命令行提示 Downloading https://services.gradle.org/distributions/gradle-2.14.1-all.zip，是在下載對應的gradle並自動解壓安裝，根據網絡情況，可能耗時極長，且容易報錯。

windows環境下，在命令行窗口下載安裝時，點擊窗口內部，會使其暫停下載工做，有下載進度提示的時候才能夠看出來。按下Esc鍵就能繼續工做。坑我好幾回。固然也可以使用VSCode控制檯代替。

也可以使用如下方法：找到如 cordova-app/platforms/android/cordova/lib/buildersGradleBuilder.js，其中有

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] ||'https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip'

根據路徑，使用迅雷等工具下載對應安裝包，並修改上述語句中的外鏈爲已下載好的路徑，如，將gradle-2.14.1-all.zip放在了D盤根路徑，則修改成

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'file:///gradle-2.14.1-all.zip';

而後從新運行cordova build 或 cordova run

缺點是每新建一個工程就得改一遍，固然速度快多了

---

五、Vue.js

參照官方指南，使用官方腳手架 vue-cli 初步構建項目：http://vuejs.org/v2/guide/ins...

該項目將與以前的cordovaApp項目整合，假設爲vueApp（默認使用vue-router、標準ESLint，不用測試模塊，由於並不複雜）

vue init webpack vue-app
cd vue-app
cnpm install

只在下載包時使用cnpm命令加快下載速度，其餘狀況最好使用npm或 yarn（然而官網太難進），不然可能出現各類問題……

npm run dev

注意界面上的各類地址

六、Visual Studio Code

沒什麼好說的，相比 sublime text 而言，插件化定製等功能更加方面好用，並且免費

---

2、項目整合

即：將vue-app項目默認的構建位置dist目錄修改成cordova-app項目中的www目錄，並可以使用cordova命令直接運行在手機端

一、構建

給出vue項目構建須要修改的地方，如圖所示

修改後，npm run build 會將工程打包到與 app-vue 項目同級的 app-cordova 項目下

└── www
    ├── css
    ├── fonts
    ├── img
    ├── js
    └── index.html

不知道爲何以前這樣是報錯的，須要把img文件夾移動到css文件夾下，後來莫名其妙就行了……

二、vue 本地調試

至少在index.html中添加

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

在瀏覽器運行後，打開控制檯，切換成設備視圖，跟普通html界面同樣調試，開發模式下，可以使用vue-devtools瀏覽器拓展插件獲取有效界面信息。如圖

三、Cordova 本機調試

將構建好的項目運行在手機端，USB鏈接手機，打開調試模式

注意：一切正常但仍是安裝出錯，一、卸載以前的app；二、確認容許cordova安裝。我沒遇到過其餘的了

打開 Chrome 瀏覽器，輸入地址chrome://inspect，默認進入 chrome://inspect/#devices，將在頁面顯示當前可用設備，點擊連接彈出控制檯界面，而後跟普通頁面同樣調試