Cordova打包vue項目(Android)

來源:互聯網
上載者:User

標籤:https   uid   add   icp   引入   sub   事件   deb   bsp   

 準備工作:安裝好必要環境:    vue-cli腳架構,node.js,android環境  (詳情請看cordova官網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),拷貝到安卓手機安裝即可。

 

Cordova打包vue項目(Android)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.