今天尝试了用cordova把vue项目打包成apk,能够参考w3c文档,期间也是踩了很多坑,既然打包的是vue,首先要准备一个能运行的vue项目。javascript
1.修改vue项目中main.js。html
document.addEventListener('deviceready', function() { new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) window.navigator.splashscreen.hide() }, false)
2.在index.html中引入cordova vue
<script type="text/javascript" src="cordova.js"></script>
3.修改config文件夹中的index.js,java
把build中的android
修改成npm
修改完成以后执行npm run build打包项目。app
4.建立cordova项目ide
在控制台,进入想要建立项目的目录,动画
执行 npm install -g cordova下载cordova,下载成功以后,建立cordova项目ui
cordova create CordovaProject io.cordova.hellocordova CordovaApp。
下载安卓环境 cordova platform add android
5.把vue项目打包后生成的dist文件里面的内容拿出来,放在cordova项目的www目录下,www里面以前的内容能够直接删掉。
6.修改app的配置
修更名字:在config.xml中的<name></name>标签中输入想要的名字。
修改icon和启动动画(偷个懒,只放置了一种icon与图片):
在以下位置放置须要的icon与启动图片
而后在config.xml里作以下修改:
<platform name="android"> <allow-intent href="market:*" /> <icon density="ldpi" src="res/icon/android/icon.png" /> <icon density="mdpi" src="res/icon/android/icon.png" /> <icon density="hdpi" src="res/icon/android/icon.png" /> <icon density="xhdpi" src="res/icon/android/icon.png" /> <icon density="xxhdpi" src="res/icon/android/icon.png" /> <splash density="land-hdpi" src="res/screen/android/splash.png" /> <splash density="land-ldpi" src="res/screen/android/splash.png" /> <splash density="land-mdpi" src="res/screen/android/splash.png" /> <splash density="land-xhdpi" src="res/screen/android/splash.png" /> <splash density="port-hdpi" src="res/screen/android/splash.png" /> <splash density="port-ldpi" src="res/screen/android/splash.png" /> <splash density="port-mdpi" src="res/screen/android/splash.png" /> <splash density="port-xhdpi" src="res/screen/android/splash.png" /> </platform>
并添加如下代码:
<preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="30000" /> <preference name="SplashShowOnlyFirstTime" value="true" />
如此就配置完了。
7.执行 cordova run build,会生成apk,发送大手机上下载就能够了。