安装好必要环境: vue-cli,webpack,node.js,android环境 (http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html);
个人觉得,android环境是最麻烦的,只要配置好,后面的都比较简单。
如果已经安装则直接跳过,否则执行以下命令:
npm install -g cordova
分别执行3个命令
cordova create cordovaApp cd cordovaApp cordova platform add android
其中:
执行完这3个命令之后,cordova项目就建立好了。
本文章不提供vue项目
在body之间加入引入cordova.js
<body> <div id="app"></div> <script type="text/javascript" src="cordova.js"></script> <!-- built files will be auto injected --> </body>
修改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的事件,打包在真机上才能实现监听)。
npm run build
执行完成后会生成一个dist文件夹,找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。
cordova platform remove android
cordova platform add android
cordova build android
会生成一个可执行的apk文件(cordova项目文件\platforms\android\app\build\outputs\apk\debug\app-debug.apk),拷贝到安卓手机安装即可。