準備工作：需要之前配置好vue-cli腳架構，安裝好cordova環境。下面開始對vue.js項目進行打包，打包環境為Android。
可以看下我的github：https://github.com/padipata ，里面有我自己寫的vue項目，喜歡的給個關注唄。
1.添加cordova項目
$ cordova create myApp1 org.apache.cordova.myApp myApp2
其中：
2.在vue中添加cordova的配置
myApp1/www/index.html----->vue/index.html
myApp1/www/js/index.js----->vue/vuex/main.js
var app = {// Application Constructorinitialize: function() {thisbindEvents();},// Bind Event Listeners//// Bind any events that are required on startup Common events are:// 'load', 'deviceready', 'offline', and 'online'bindEvents: function() {documentaddEventListener('deviceready', thisonDeviceReady, false);},// deviceready Event Handler//// The scope of 'this' is the event In order to call the 'receivedEvent'// function, we must explicitly call 'appreceivedEvent();'onDeviceReady: function() {appreceivedEvent('deviceready');},// Update DOM on a Received EventreceivedEvent: function(id) {var parentElement = documentgetElementById(id);var listeningElement = parentElementquerySelector('listening');var receivedElement = parentElementquerySelector('received');listeningElementsetAttribute('style', 'display:none;');receivedElementsetAttribute('style', 'display:block;');consolelog('Received Event: ' + id);}};appinitialize();1）內容拷貝到vue/src/vuex/main.js中
2）onDeviceReady時啟動app
onDeviceReady: function () {//appreceivedEvent('deviceready');appRouterstart(App, 'app')windownavigatorsplashscreenhide()}3.創建android項目
終端中進入到myApp1 項目，執行以下命令：
cordova platform add android這時候vue項目中會得到一個android文件夾，里面包含一個測試版本的apk，可以傳輸到手機上調試。
4.添加cordova插件
終端中進入到vue項目，執行以下命令：
cordova plugin add xxxx
5. 構建 vue項目
許多人掉過這個坑，打包出來的apk是一個cordova默認的空白項目，因此，需要在打包vue之前在這里把配置文件修改過來。
終端中進入到vue項目，執行以下命令：npm run build
6.文件轉移
將dist文件夾下的文件，拷貝到cordova/platforms/androd/assets/www目錄下 （index.html替代掉原本的）
7.構建cordova項目
從終端進入到myApp1/platforms/android/cordova目錄下，執行以下命令：
cordova build android //構建apk
配置JDK環境（這里只對mac os進行記錄，Win系統請自行腦補）：
cd ~ 進入到~目錄
touch .bash_profile
vi .bash_profile 使用vi編輯器編輯 .bash_profile文件
然后輸入 i ,在vi編輯器里面輸入 i 的意思是開始編輯。
vi編輯器里面的內容如下:
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_79.jdk/Contents/HomeCLASSPAHT=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jarPATH=$JAVA_HOME/bin:$PATH:export JAVA_HOMEexport CLASSPATHexport PATH
然后退出vi編輯器使用如下命令：（個人習慣 :wq！回車）
1. 輸入ese
2. 輸入冒號: wq
3. 保存退出
如果以上修改完畢切正確，那么接下來就是讓配置的環境變量生效，使用如下命令：source .bash_profile
完畢以后查看下當前的java 版本是否正確輸入如下命令：java -version
如果是預想中的1.8，那么恭喜你，你這個時候就可以執行： cordova build android
cordova run android //構建apk，并安裝到連接的設備上 （按個人需求）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
