cordova打包vue项目成webapp

今天尝试了用cordova把vue项目打包成apk,可以参考w3c文档,期间也是踩了不少坑,既然打包的是vue,首先要准备一个能运行的vue项目。

1.修改vue项目中main.js。

document.addEventListener('deviceready', function() {
	new Vue({
		el: '#app',
		router,
		components: {
			App
		},
		template: '<App/>'
	})
	window.navigator.splashscreen.hide()
}, false)

2.在index.html中引入cordova 

 <script type="text/javascript" src="cordova.js"></script>

3.修改config文件夹中的index.js,

把build中的

修改为

修改完成之后执行npm run build打包项目。

4.创建cordova项目

在控制台,进入想要创建项目的目录,

执行 npm install -g cordova下载cordova,下载成功之后,创建cordova项目

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,发送大手机上下载就可以了。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值