准備工作:
安裝好必要環境: 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),拷貝到安卓手機安裝即可。