使用cordova對vue項目進行打包(android)

說明:

當前有一個vue項目,需要使用cordova進行打包

 

環境條件:

1 jdk-即Java運行環境

   這個很簡單,百度一下就行,學過Java的話都有安裝過jdk

   檢查電腦是否安裝了jdk:win+R->輸入cmd->回車進入黑窗口,輸入javac->如果出現關於javac的幫助信息則表示已安裝

   

2 安裝nodejs環境

   相信一般要打包vue項目肯定開始也是裝了nodejs了

   查看是否安裝了nodejs:node -v(如果出現了版本號則表示安裝了)

   

3 然後需要安裝android SDK

   3.1 首先需要下載android SDK Tools(別下錯了)

         這裏提供一個下載地址:http://www.androiddevtools.cn/    進去之後搜索SDK Tools,我下載的是這個壓縮包版的

        

         下載完之後解壓這個壓縮包,解壓後如下:

         

          雙擊打開SDK Manager應用程序,打開後需要下載一切東西如下:

          1 Tools:我這裏選了這3個

           

           2  Android API:這裏有很多版本的,我選了最新的(後來因爲打包時報SDK錯誤,按照提示我又安裝了API 28中的                                                  SDK Platform

           

           3 最後的Extras:勾選了這2個

           

           這裏需要提一下,下載的時候可能會比較慢,按照網上查找的資料,很多都說可以替換一下地址,

           左上角的Tools->Options中的server和port內容,但是首先:網上發的有好幾個地址都無法訪問了,有個可以訪問,

           但我改了之後重新打開SDK Manager,獲取不到內容了,就只剩下下面這樣了:所以我這裏後來刪掉了options的配置,

           使用默認的下載了,雖然也等了一會,也不算太久,可以正常下載下來,下載完之後點擊close即可

           

           下載好之後,需要給SDK配置環境變量,複製SDK的安裝地址,添加到path下即可

           

          此電腦右鍵->屬性->高級系統設置->環境變量->系統變量的Path,

          選擇編輯->新建->將剛剛複製的地址+tools和platform-tools放到這裏

          (我這裏是添加了一個變量的形式,不用這個也行)->確定

          

          最後,查看是否安裝成功:輸入:android -h

          到這裏,android SDK的安裝也就結束了

          

4 安裝gradle(不太確定是不是要安裝,我這裏是安裝了的)

   這裏可以直接看下這篇博客:https://blog.csdn.net/yao_94/article/details/81211528

 

打包

5 到這裏環境其實已經差不多搭好了,接下來就可以準備打包了

   5.1 安裝cordova:如果沒有安裝cordova需要先安裝cordova:npm install -g cordova

   5.2 選擇一個目錄,創建一個cordova項目:cordova create hello(項目名) com.pink.puck client(安裝之後app的名字)

   5.3 cd到項目目錄下(www同級目錄),添加平臺:cordova platform add android

   5.4 如果是vue-cli3創建的項目,很多文件是沒有的,比如config文件夾沒有,自然也就沒有裏面的index.js

        所以cli3則需要在vue項目下(即src同級目錄)新建一個vue.config.js文件,在裏面配置: 

        module.exports = {
                  publicPath: '',
        }

        執行npm run build進行項目構建,構建成功之後會生成一個dist目錄,在scr同級,將dist目錄下的東西都複製到之前創建的

        cordova項目下的www目錄下,覆蓋www已有的文件(可以先刪掉www目錄下的內容再粘貼進去)

        注:如果vue.config.js中配置了這個,則生成到的目錄名就是bibibox-wb,然後下面會有一個asserts目錄,

               js和css都在這個目錄下,沒有assertDir的話則js和css直接在bibibox-wb目錄下

                

                

         上面說的是如果是cli3創建的vue項目,如果是cli2創建的話,則會有一個config目錄,下面有一個index.js文件,

         修改裏面的build當中的內容即可,不用自己新建文件了,如下:原本這裏是"/",把這裏改成""即可,

         後面構建的話也生成生成dist目錄,同樣在src同級目錄下,

         同上執行npm run build將dist目錄下的內容複製到cordova的www下

         

   5.5 打包

         進入到cordova項目目錄,執行cordova build android,打包成功如下,並且會打印打的apk包在哪個位置

         

        這裏說明一下,最終這裏是app-debug.apk,這個名字只是這個文件的名字,我們可以自己隨便改,

        到時候安裝之後app的名字還是最開始創建cordovar項目時那裏指定的,這個項目安裝之後的名字就是client

        到這裏打包已經完成了,將.apk的包安裝到安卓手機上就可以了,安裝之後打開運行看下是不是OK的就行了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章