經過cordova將vue項目打包爲webapp

準備工做：須要以前配置好vue-cli腳架構，安裝好cordova環境。下面開始對vue.js項目進行打包，打包環境爲Android。

 

 能夠看下個人github：https://github.com/padipata ，裏面有我本身寫的vue項目，喜歡的給個關注唄。

 

1.添加cordova項目

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

其中：

• myApp1：cordova目錄名
• org.apache.cordova.myApp： 包名
• myApp2： 項目名（在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>關於cordova.js的引用拷貝到vue/index.html中

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

1. var app = {
2. // Application Constructor
3. initialize: function() {
4. this.bindEvents();
5. },
6. // Bind Event Listeners
7. //
8. // Bind any events that are required on startup. Common events are:
9. // 'load', 'deviceready', 'offline', and 'online'.
10. bindEvents: function() {
11. document.addEventListener('deviceready', this.onDeviceReady, false);
12. },
13. // deviceready Event Handler
14. //
15. // The scope of 'this' is the event. In order to call the 'receivedEvent'
16. // function, we must explicitly call 'app.receivedEvent(...);'
17. onDeviceReady: function() {
18. app.receivedEvent('deviceready');
19. },
20. // Update DOM on a Received Event
21. receivedEvent: function(id) {
22. var parentElement = document.getElementById(id);
23. var listeningElement = parentElement.querySelector('.listening');
24. var receivedElement = parentElement.querySelector('.received');
25. listeningElement.setAttribute('style', 'display:none;');
26. receivedElement.setAttribute('style', 'display:block;');
27. console.log('Received Event: ' + id);
28. }
29. };
30. app.initialize();

　　1）內容拷貝到vue/src/vuex/main.js中

　　2）onDeviceReady時啓動app

1. onDeviceReady: function () {
2. //app.receivedEvent('deviceready');
3. appRouter.start(App, 'app')
4. window.navigator.splashscreen.hide()
5. }

 

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/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編輯器使用以下命令：（我的習慣  :wq！回車 ）

　　　　1. 輸入 ese 

　　　　2. 輸入冒號 : wq

　　　　3. 保存退出 

　　若是以上修改完畢切正確，那麼接下來就是讓配置的環境變量生效，使用以下命令：

　　　　source .bash_profile  

　　完畢之後查看下當前的java 版本是否正確輸入以下命令：

　　　　java -version

　　　若是是預想中的1.8，那麼恭喜你，你這個時候就能夠執行：  cordova build android

 

　　　　cordova run android       //構建apk，並安裝到鏈接的設備上　　（按我的需求）