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.csdn.net/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

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

猜你喜欢

转载自blog.csdn.net/zeternityyt/article/details/79756944