1. 程式人生 > >Cordova打包Vue專案成APK

Cordova打包Vue專案成APK

在打包之前,確保環境安裝成功,各方面都沒有錯誤,不然會吃很多苦頭,關於其他的環境安裝在另外一篇文章中記錄。本文中所有操作皆是在vscode中操作。

  1. 建立cordova工程,不然打包的時候會報當前目錄不是一個Cordova專案:
    在這裡插入圖片描述
    其中hello是目錄名字,org.single.www 是包名,world是目錄名字,建立好的cordova工程目錄下有如下檔案:
    在這裡插入圖片描述

  2. 進入到建立的目錄下,為專案新增android環境:cordova platforms add android
    在這一步的時候很多人都會報錯,而且是各種各樣的錯誤,有的是android版本問題,有的是SDK裡面檔案缺失,

    點選檢視解決辦法,這是我整理的過程中遇到的問題,後期會不斷補充。
    在這裡插入圖片描述
    上面是新增成功的樣子。測試一下整體環境是否正確:cordova requirements
    在這裡插入圖片描述
    如果android環境不正確,這裡會報錯,還有gradle檔案建議自己下載,不要等,反正我的如果是讓他自行下載配置的話需要兩三個小時而且中間會連線失敗,這個自己按照他給的網址複製到迅雷裡面下載(親測有效,速度還快),這個下載下來需要配置,此處略過。

  3. 建立Vue專案,先建立目錄,在目錄裡面建立Vue專案:
    在這裡插入圖片描述

    • 安裝vue:cnpm install vue
      在這裡插入圖片描述
    • 安裝webpack:cnpm install webpack -g
      :
      在這裡插入圖片描述
    • 安裝vue腳手架:cnpm install vue-cli -g:
      在這裡插入圖片描述
    • 根據模板建立專案:vue init webpack hello,其中hello是專案名稱:
      在這裡插入圖片描述
      這個報錯資訊暫時不用管,我在測試的時候未影響專案的正常執行
    • 進入專案資料夾下,執行專案:
      在這裡插入圖片描述
      這裡我每次都報錯,解決辦法是執行npm install命令:
      在這裡插入圖片描述
      這一處一般不會報錯,但是如果報錯的話執行cnpm install命令:
      在這裡插入圖片描述
      這樣就成功了,之後執行npm run dev命令,就可以看到執行結果,因為未寫程式碼,初始化的專案執行成功之後如下圖:
      在這裡插入圖片描述
      在這裡插入圖片描述
  4. 我們假設你的Vue專案是沒有問題且經過測試,現在來進行最後一步打包成apk檔案安裝在手機上:

    1. 首先將vue專案打包,在不修改任何配置檔案的情況下,執行語句:cnpm run build會生成dist資料夾,然後我們再將dist資料夾下的內容放到cordova專案的www資料夾下,這裡我們可以通過配置檔案省略此步驟,修改config/index.js檔案,將build內的內容修改一部分:
      在這裡插入圖片描述
      只修改此部分,切勿刪除build內的其他內容,配置檔案在沒摸清的情況下不要輕易改動!!
    2. 假設vue專案已經打包成功,現在進行cordova打包:cordova build android
      在這裡插入圖片描述
      打包成功會有如下提示,這時我們到提示的目錄下找到這個apk檔案就可以了,放到手機上就可以安裝了。
      在這裡插入圖片描述

最後的最後,下面是我在打包過程中遇到過的一些問題以及解決方案,都是經常會用到的,希望有用!!!
https://blog.csdn.net/single_cong/article/details/84073316