準(zhǔn)備工作：需要之前配置好vue-cli腳架構(gòu)，安裝好cordova環(huán)境。下面開始對(duì)vue.js項(xiàng)目進(jìn)行打包，打包環(huán)境為Android。

1.添加cordova項(xiàng)目

$? cordova create myApp1 org.apache.cordova.myApp myApp2

其中：

• myApp1：cordova目錄名
• org.apache.cordova.myApp： 包名
• myApp2： 項(xiàng)目名（在config.xml的<name>中查看）

?

2.在vue中添加cordova的配置

myApp1/www/index.html----->vue/index.html

• 將myApp1/www/index.html中所有的<meta>拷貝到vue/index.html中
• 將將myApp1/www/index.html中<script>關(guān)于cordova.js的引用拷貝到vue/index.html中

myApp1/www/js/index.js----->vue/vuex/main.js

var app = {

// Application Constructor

initialize: function() {

this.bindEvents();

},

// Bind Event Listeners

//

// Bind any events that are required on startup. Common events are:

// 'load', 'deviceready', 'offline', and 'online'.

bindEvents: function() {

document.addEventListener('deviceready', this.onDeviceReady, false);

},

// deviceready Event Handler

//

// The scope of 'this' is the event. In order to call the 'receivedEvent'

// function, we must explicitly call 'app.receivedEvent(...);'

onDeviceReady: function() {

app.receivedEvent('deviceready');

},

// Update DOM on a Received Event

receivedEvent: function(id) {

var parentElement = document.getElementById(id);

var listeningElement = parentElement.querySelector('.listening');

var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');

receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);

}

};

app.initialize();

　　1）內(nèi)容拷貝到vue/src/vuex/main.js中

　　2）onDeviceReady時(shí)啟動(dòng)app

onDeviceReady: function () {

//app.receivedEvent('deviceready');

appRouter.start(App, 'app')

window.navigator.splashscreen.hide()

}

?

3.創(chuàng)建android項(xiàng)目

　　終端中進(jìn)入到myApp1 項(xiàng)目，執(zhí)行以下命令：　　

　　　　cordova platform add android　　　　這時(shí)候vue項(xiàng)目中會(huì)得到一個(gè)android文件夾，里面包含一個(gè)測(cè)試版本的apk，可以傳輸?shù)绞謾C(jī)上調(diào)試。

?

4.添加cordova插件

　　終端中進(jìn)入到vue項(xiàng)目，執(zhí)行以下命令：

　　　　cordova plugin add xxxx

5. 構(gòu)建 vue項(xiàng)目

　　許多人掉過這個(gè)坑，打包出來的apk是一個(gè)cordova默認(rèn)的空白項(xiàng)目，因此，需要在打包vue之前在這里把配置文件修改過來?！?/p>

　　終端中進(jìn)入到vue項(xiàng)目，執(zhí)行以下命令：

　　　　　　npm run build

6.文件轉(zhuǎn)移

　　將dist文件夾下的文件，拷貝到cordova/platforms/androd/assets/www目錄下 ? ? （index.html替代掉原本的）

?

7.構(gòu)建cordova項(xiàng)目

　　從終端進(jìn)入到myApp1/platforms/android/cordova目錄下，執(zhí)行以下命令：

　　　　cordova build android??? //構(gòu)建apk　　

?

　　配置JDK環(huán)境（這里只對(duì)mac os進(jìn)行記錄，Win系統(tǒng)請(qǐng)自行腦補(bǔ)）：

　　　　cd ~ 進(jìn)入到?~?目錄

　　　　touch .bash_profile ?

　　　　vi .bash_profile?? ? ? ? 使用vi編輯器編輯 .bash_profile文件

　　　　然后輸入 ? i ? ,在vi編輯器里面輸入 i ?的意思是開始編輯。

　　　　vi編輯器里面的內(nèi)容如下:?

　　　　JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_79.jdk/Contents/Home

　　　　CLASSPAHT=.:JAVAHOME/lib/dt.jar:JAVAHOME/lib/dt.jar:JAVA_HOME/lib/tools.jar

　　　　PATH=JAVAHOME/bin:JAVAHOME/bin:PATH:

　　　　export JAVA_HOME

　　　　export CLASSPATH

　　　　export PATH　　　

　　　　然后退出vi編輯器使用如下命令：（個(gè)人習(xí)慣 ?:wq！回車?）

　　　　1. 輸入?ese?

　　　　2. 輸入冒號(hào)?: wq

　　　　3. 保存退出?

　　如果以上修改完畢切正確，那么接下來就是讓配置的環(huán)境變量生效，使用如下命令：

　　　　source .bash_profile ?

　　完畢以后查看下當(dāng)前的java 版本是否正確輸入如下命令：

　　　　java -version

　　　如果是預(yù)想中的1.8，那么恭喜你，你這個(gè)時(shí)候就可以執(zhí)行： ?cordova build android

?

　　　　cordova run android?????? //構(gòu)建apk，并安裝到連接的設(shè)備上　　（按個(gè)人需求）

?

轉(zhuǎn)載于:https://www.cnblogs.com/hanli-you/p/8533737.html

總結(jié)

以上是生活随笔為你收集整理的通过cordova将vue项目打包的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。