cordova打包vue项目成webapp-蒲公英云

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中的

修改为

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中的标签中输入想要的名字。

修改icon和启动动画（偷个懒，只放置了一种icon与图片）：

在如下位置放置需要的icon与启动图片

70 2

然后在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" />