Vue項目打包成app——Cordova

Cordova是使用HTML、CSS和JavaScript構建的混合移動應用程序的平臺。
官網：https://cordova.apache.org/
中文官網：http://cordova.axuer.com/

開發環境及工具

開發環境

• 操作系統： Windows 10

• nodeJs：需要使用其npm包管理工具安裝Cordova

• Java環境：

• 下載安裝jdk http://www.oracle.com/technetwork/java/javase/downloads/index.html

• 配置JAVA_HOME環境變量，指定爲JDK安裝路徑

• Android環境：

• 下載安裝Android JDK(installer_r24.4.1-windows.exe)

• 根據自己需要選擇必要的API

• 配置ANDROID_HOME環境變量，指定爲Android jdk安裝路徑

工具

1、VS code
2、Android Studio（可選）
3、夜神模擬器

教程

一、安裝cordova生成app

• npm安裝cordova npm install cordova -g
• 創建cordova項目
  cordova create hello(項目名)
  或者使用完整形式
  cordova create hello(項目名) com.example.hello（包名） HelloWorld（程序標題）
• 進入當前項目
  cd hello
• 添加平臺
  瀏覽器：cordova platform add browser
  iOS：cordova platform add ios --save
  Android：cordova platform add android --save

可以通過cordova platform ls查看當前已經安裝的運行平臺
注意：運行iOS或Android需要安裝對於的sdk

• 檢查構建app的條件
  cordova requirements
  

如上環境還沒有裝好，繼續根據提示安裝Android SDK和gradle

• 安裝Android SDK
• 可以通過官網下載(下載Android SDK),也可以通過安裝 Android Studio開發工具會自動下載
• 配置環境變量
  在電腦屬性裏面打開高級系統設置，選擇高級中找到環境變量進行系統變量的配置如下：
  

再修改path變量

保存後記得重新打開cmd才生效！！！！

• 安裝gradle

• 下載地址

• 配置環境變量
  地址也是選擇自己安裝包的地址
  

  修改path變量指向gradle下的bin目錄
  

最後重啓cmd查看Cordova環境是否安裝成功

• 構建APP並運行demo
  執行cordova build android，出現如下頁面顯示BUILD SUCCESSFUL則構建apk成功
  

在成功標識後面有打包成功的apk路徑，在文件夾中找到apk選擇使用模擬器打開（個人用的是夜神模擬器）或使用安卓手機安裝打開即可。

二、綁定vue項目

可以選擇直接導入打包好的vue文件或者在該Cordova項目中再建一個vue項目開發。
這裏因爲我前期自己已經搭建了一個vue項目，直接選擇導入的方式。

• 打包vue
  通過npm run build（此處根據自己配置的package文件確定命令，一般爲build）打包文件在dist目錄下，如下展示
  

• 遷移到Cordova項目
  將dist目錄下的文件複製粘貼到之前創建的Cordova項目的www目錄下，記得選擇替換！！！
  

• 運行打包apk文件（詳細如一最後描述）
  cordova build android 最後用模擬器打開生產的apk文件即可