Cordova打包vue項目(Android)


准備工作:

安裝好必要環境: vue-cli,webpack,node.js,android環境 (http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html);

個人覺得,android環境是最麻煩的,只要配置好,后面的都比較簡單。

 

開始:

第一步:安裝cordova

如果已經安裝則直接跳過,否則執行以下命令:

npm install -g cordova

 

第二步:新建cordova項目

分別執行3個命令

cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android

 

其中:

  • cordovaApp:  cordova目錄名
  • com.cordova.testapp:  包名

執行完這3個命令之后,cordova項目就建立好了。

 

第三步:修改vue項目

本文章不提供vue項目

1.首先修改vue項目的index.html

在head之間加入

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

 

這里注意加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">可能導致頁面樣式改變,如果改變則不加,否則還是建議加上。這段主要是防止跨站腳本攻擊。

在body之間加入引入cordova.js

 
        
<body>
    <div id="app"></div>
    <script type="text/javascript" src="cordova.js"></script>
    <!-- built files will be auto injected -->
</body>
 
        

 

2.修改config文件夾中的index.js文件

修改build中的

 
        
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

 
        
   assetsSubDirectory: '',
   assetsPublicPath: '',
 
        

 

3.在main.js里面添加(省略這步驟,打包后可能會導致出現空白頁)

import VueCorvova from 'vue-cordova'
Vue.use(VueCorvova)

當然,vue-cordova需要在vue項目中引入,在vue項目終端執行

npm install vue-cordova --save

 

測試:

然后在vue項目終端運行

npm run dev

 

看看是否能夠運行起來,如果正常說明到這里是沒有問題的(注意這里運行的時候需要將document.addEventListener注釋,因為在瀏覽器環境下是找不到cordova.js的也就不能監聽到deviceready的事件,打包在真機上才能實現監聽)。

 

第四步:將vue文件放到cordova項目中並打包(成功后修改,只需反復該步驟即可)

1.先在vue項目中運行

npm run build

執行完成后會生成一個dist文件夾,找到這個文件夾將里面的所有文件復制到你的cordova項目的www文件夾下替換它原有的文件。

 

2.然后在cordova項目終端執行

cordova build android

會生成一個可執行的apk文件(cordova項目文件\platforms\android\app\build\outputs\apk\debug\app-debug.apk),拷貝到安卓手機安裝即可。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM