Cordova打包vue项目(Android)

Posted 七银丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Cordova打包vue项目(Android)相关的知识,希望对你有一定的参考价值。

 

准备工作:安装好必要环境:    vue-cli脚架构,node.js,android环境  (详情请看cordova官网http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html

    个人觉得,android环境是最麻烦的,只要配置好,后面的都比较简单.

 

开始:

第一步:安装cordova

如果已经安装则直接跳过,否则执行以下命令:

npm install -g cordova

 

第二步:新建cordova项目

分别执行3个命令

cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android

 

其中:

  • cordovaApp:  cordova目录名
  • com.cordova.testapp:  包名

执行完这3个命令之后,cordova项目就建立好了。

第三步:修改vue项目

本文章不提供vue项目

1.首先修改vue项目的index.html

在head之间加入

<meta http-equiv="Content-Security-Policy" content="default-src ‘self‘ data: gap: https://ssl.gstatic.com ‘unsafe-eval‘; style-src ‘self‘ ‘unsafe-inline‘; media-src *; img-src ‘self‘ data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

 

这里注意加入<meta http-equiv="Content-Security-Policy" content="default-src ‘self‘ data: gap: https://ssl.gstatic.com ‘unsafe-eval‘; style-src ‘self‘ ‘unsafe-inline‘; media-src *; img-src ‘self‘ data: content:;">可能导致页面样式改变,如果改变则不加,否则还是建议加上。这段主要是防止跨站脚本攻击。

在body之间加入引入cordova.js


<body>
    <div id="app"></div>
    <script type="text/javascript" src="cordova.js"></script>
    <!-- built files will be auto injected -->
</body>

2.修改config文件夹中的index.js文件

修改build中的


    assetsSubDirectory: static,
    assetsPublicPath: /,


   assetsSubDirectory: ‘‘,
   assetsPublicPath: ‘‘,

3.在main.js里面添加(省略这步骤,打包后可能会导致出现空白页)
import VueCorvova from vue-cordova
Vue.use(VueCorvova)

当然,vue-cordova需要在vue项目中引入,在vue项目终端执行

npm install vue-cordova --save

 

测试:

然后在vue项目终端运行

npm run dev

 

看看是否能够运行起来,如果正常说明到这里是没有问题的(注意这里运行的时候需要将document.addEventListener注释,因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件,打包在真机上才能实现监听)。

 

第四步:将vue文件放到cordova项目中并打包(成功后修改,只需反复该步骤即可)

1.先在vue项目中运行

npm run build

 

执行完成后会生成一个dist文件夹,找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。


2.然后在cordova项目终端执行

cordova build android

 

会生成一个可执行的apk文件(cordova项目文件\platforms\android\app\build\outputs\apk\debug\app-debug.apk),拷贝到安卓手机安装即可。

 





以上是关于Cordova打包vue项目(Android)的主要内容,如果未能解决你的问题,请参考以下文章

Cordova打包vue项目(Android)

cordova+vue 项目打包成Android(apk)应用

通过cordova将vue项目打包为app

cordova混合App开发:Cordova+Vue实现Android APP开发 (打包及调试)

VUE- Cordova打包APP

移动端用Cordova将vue项目打包成app