Cordova打包vue项目(Android) _vue项目

沉舟侧畔千帆进，病树前头万木春。这篇文章主要讲述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="https://www.songbingjia.com/android/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项目中运行