使用Cordova打包Vue專案

因為公司專案要求, 原本的vue移動端專案, 現在要求能使用定位, 呼叫攝像頭等功能, 並且開發成混合APP.

一個小白的孤軍奮戰史, 記錄一下, 以備後用....

第一步: 安裝cordova

　在命令視窗執行:

　　npm install -g cordova

第二步: 新建一個cordova專案

　同樣的在命令視窗執行命令:

　　cordova create cordovaApp com.cordova.testapp

　　cd cordovaApp

　　cordova platform add android (這一步是加入android執行平臺)

第三步: 修改你的vue專案

　1. 把cordova專案的index.html裡面的meta標籤和cordova.js引用複製到vue專案的index.html

　2. 修改config資料夾中index.js檔案

　　　　build中的

　　　　修改為

　3. 執行 npm run dev

　　　如果可以執行, 就證明沒有問題, 繼續下一步

　4. 修改main.js檔案

　　增加紅線部分標註出來的內容

第四步: 將vue檔案放到cordova專案中並打包

　1. 先打包vue專案, 執行

　　　　npm run build

　　將生成的dist資料夾中的所有檔案, 複製到cordova專案中的www資料夾中, 替換掉它原有的那些檔案

　2. 在你的cordova專案中 , 執行

　　　　cordova build android

　　執行成功之後, 會在你的cordova專案資料夾中的 platforms->android->app->build->outputs->apk 資料夾中生成一個 apk 檔案, 就可以安裝到安卓手機上了

　　(不知道會不會有其他情況是生成在別的資料夾下的, 這裡只是講我的情況)

　　這一步涉及到的一些問題, 在下面進行說明, 如果你在這一步就執行成功, 那麼以下內容就可以不用看了

接下來講解下載cordova build android 這一步中我出現的問題

PS: 這一段花了三天的時間, 所以可能也記不太清楚先後了, 關於cordova android的內容我就都放在一起了

　1. 需要先安裝一個 android studio

　　https://developer.android.google.cn/studio/

　　這是安裝地址, 我選擇的是一路盲裝...就是預設預設預設

　2. 開啟android studio, 找到 file 中的 setting 選項

　3. 因為我在執行 cordova build android 的時候報的錯誤, 那個報錯忘記截圖了, 大概好像是

　　license for package Android SDK Platform 27 not accepted (意思應該是我少了一個啥)

　　所以我在

　　找到了這個, 也算是瞎蒙吧, 提示我的是27, 剛開始開啟的時候我的這個Android 8.1 後面那個API Level 27 這一行後面是 north installed, 然後我就勾選了, 然後選擇了下面的apply, 將這個安裝了.

　4. 等安裝結束之後, 再次在自己的cordova專案裡面執行

　　　　cordova build android

　　沒有報錯, 順利打包成功, 安裝到自己的手機上, 也是可以執行的, 至此, 順利完成打包!

感言:

　　現在記錄下來, 發現步驟真的是很簡單了, 但是在cordova build android 那一步上卻卡了很久, 當問題順利解決掉的時候心裡也是很有成就感的.

使用Cordova打包Vue專案