cordova打包vue项目为app

1、建立cordova项目html

一、建立项目前提条件vue

（1）node.jsjava

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

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

（2）JDKios

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

并配置环境变量（重要）后端

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

（3）android SDK安全

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

二、下载安装cordova

当以上全部依赖和前提都安装好后。

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

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

三、建立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，不然会出错。

四、打包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便可。

五、请求后端数据

若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

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