因為公司項目要求, 原本的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 這一行 后面是 not installed, 然后我就勾選了, 然后選擇了下面的apply, 將這個安裝了.
4. 等安裝結束之后, 再次在自己的cordova項目里面執行
cordova build android
沒有報錯, 順利打包成功, 安裝到自己的手機上, 也是可以運行的, 至此, 順利完成打包!
感言:
現在記錄下來, 發現步驟真的是很簡單了, 但是在cordova build android 那一步上卻卡了很久, 當問題順利解決掉的時候心里也是很有成就感的.