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

成都創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營(yíng)銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營(yíng)銷需求！成都創(chuàng)新互聯(lián)公司具備承接各種類型的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)項(xiàng)目的能力。經(jīng)過10余年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。

可以看下我的github：https://github.com/padipata ，里面有我自己寫的vue項(xiàng)目，喜歡的給個(gè)關(guān)注唄。

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() {
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 Event
receivedEvent: 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）內(nèi)容拷貝到vue/src/vuex/main.js中

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

onDeviceReady: function () {
//appreceivedEvent('deviceready');
appRouterstart(App, 'app')
windownavigatorsplashscreenhide()
}

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之前在這里把配置文件修改過來。　

終端中進(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=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
PATH=$JAVA_HOME/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è)人需求）

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：通過cordova將vue項(xiàng)目打包為webapp的方法
本文路徑：http://www.yijiale78.com/article38/pcpppp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、Google、App設(shè)計(jì)、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)