cordova打包vue项目成webapp

今天尝试了用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,发送大手机上下载就能够了。