cordova打包vue项目为app

一、创建cordova项目

1、创建项目前提条件

（1）node.js

详细安装步骤可参考node.js官网：https://nodejs.org/en/

下载安装成功后，在命令窗口中输入npm -v查看是否成功

（2）JDK

在官网下载安装：https://www.oracle.com/index.html

并配置环境变量（重要）

成功后，在命令窗口输入java 和javac。出现类似信息则表示安装成功。

（3）android SDK

具体安装步骤请参考： https://blog.youkuaiyun.com/zeternityyt/article/details/79655150

2、下载安装cordova

当以上所有依赖和前提都安装好后。

打开命令提示符或者终端，然后输入npm install -g cordova

命令运行完后，输入cordova -v。出现版本号则表示安装成功。

3、创建cordova项目并添加平台

打开命令提示符或者终端，输入

cordova create apptest com.test.app

其中apptest代表创建的项目名，com.test.app为打包成apk以后的名字。

创建成功后可以看见出现以下目录结构：

然后进入apptest目录cd apptest

添加平台：

android：cordova platform add android

ios：cordova platform add ios

这里添加的是android，命令运行后出现以下信息则表示添加成功

注意：这里Using cordova-fetch for cordova-android@~7.0.0。那么在我们安装的android SDK中需要有android7.0，否则会出错。

4、打包vue项目

如果你还不知道怎么创建vue项目，则详见vue.js官网：https://cn.vuejs.org/

这里的前提是已经有了一个vue项目，在打包之前，我们进入vue的项目的config目录，找到index.js，找到build中的部分：

修改为：

首先试运行vue项目，如果运行成功，则打开终端或者命令窗口，输入npm run build。

打包成功后，把打包后的dist中的文件，包括static文件夹和index.html放到cordova项目中的www的文件夹下。

然后进入cordova项目的文件夹下（cd apptest）

执行cordova build android，出现如下图所示则表示打包成功：

打包后的apk在下图所示文件夹中：

如需测试，则在手机上下载该apk即可。

5、请求后端数据

若vue项目需跨域请求后端数据，那么在经过以上步骤打包成功后，会在请求的时候出现一个错误： 

refused to connect to [Any Url] because it violates the following Content Security Policy directive

这个的意思是，拒绝连接到任意url，因为违反了安全策略指令。

我们需要添加白名单插件：

前提为cordova的版本需要4.0以上，android的版本要求4.0.0以上。

打开命令窗口，输入

cordova plugin add cordova-plugin-network-information

运行成功后，再输入

cordova plugin add cordova-plugin-whitelist

再根据以上步骤进行打包一次，则可以请求到后端数据。