cordova打包vue项目成webapp

「爱情、让人受尽委屈。」 2022-05-13 23:52 207阅读 0赞

今天尝试了用cordova把vue项目打包成apk,可以参考[w3c文档][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

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

把build中的

![70][]

修改为

![70 1][]

修改完成之后执行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与启动图片

![70 2][]

然后在config.xml里做如下修改：

并添加以下代码：

如此就配置完了。

7.执行 cordova run build，会生成apk,发送大手机上下载就可以了。

[w3c]: https://www.w3cschool.cn/cordova/cordova_overview.html
[70]: /images/20220514/a2d7ac8df8b040fdbd605e3427bea813.png
[70 1]: /images/20220514/491872b36cab45a888a17abe70cea0c3.png
[70 2]: /images/20220514/67a1551f5eb24d679b937673d000003b.png