標籤: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)