cordova打包web项目

最新推荐文章于 2022-08-23 17:31:15 发布

孤独的小饼干

最新推荐文章于 2022-08-23 17:31:15 发布

阅读量811

点赞数

本文链接：https://blog.csdn.net/gggg989898/article/details/108578141

版权

文章目录

前言
创建Cordova项目的条件
一、下载安装Cordova
二、新建Cordova项目（创建Cordova打包环境）
总结

前言

Cordova是什么？ Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。

Cordova官网
在这里插入图片描述

创建Cordova项目的条件

nodejs
要有node环境
在这里插入图片描述

npm
要有npm
在这里插入图片描述

jdk
要有Java环境
在这里插入图片描述

一、下载安装Cordova

示例：我们篇文章主要介绍的是Codrova打包vue项目。
当具备了上面的运行环境后，我们开始安装Cordova。
打开终端或者命令行，
命令：

普通安装：

npm install -g cordova

使用淘宝镜像安装：

npm install -g cordova --registry=https://registry.npm.taobao.org

这个过程可能比较久
在这里插入图片描述
安装完成后验证，出现版本号则表示安装成功。

cordova -v

在这里插入图片描述

二、新建Cordova项目（创建Cordova打包环境）

1.创建Cordova项目

cordova create hsApp com.cordova.testapp

cordova create 项目名 com.公司名.项目名类名

2.添加平台

1⃣️添加安卓

cordova platform add android

在这里插入图片描述

2⃣️添加ios

cordova platform add ios

在这里插入图片描述

3.打包vue项目

1⃣️创建一个vue项目

如果还没有一个vue项目，就要新建一个，下方链接直达
https://blog.csdn.net/gggg989898/article/details/107959610

2⃣️修改vue项目

（1）在index.html中加入

<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">

(2) 引入Cordova.js,添加一个监听设备的函数

<body>

  <div id="app"></div>

   <script type="text/javascript" src="cordova.js"></script>

  <script>

      document.addEventListener('deviceready', function() {   }, false);

  </script>

</body>

（3）修改config下的index.js文件

assetsSubDirectory: 'Static',

assetsPublicPath: '/',

改为

assetsSubDirectory: ' ',

assetsPublicPath: ' ',

或者

assetsSubDirectory: ' ',

assetsPublicPath: ' ./',

然后运行vue项目，npm run dev
如果能运行成功
就执行命令打包
打包成功后会在目录下生成一个dist文件夹，将里面的static和index.html放到Cordova的www文件里夹下。
在这里插入图片描述

在这里插入图片描述

3⃣️ 打包

然后首先验证一下是否具备了Cordova运行所需环境，否则打包的时候会报错。
执行命令：

 cordova requirements

如果现实下面的信息说明配置好了

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-30,android-29,android-20,android-19,android-18,android-17,android-16
Gradle: installed /Users/pony/gradle-3.5-all/bin/gradle

在Cordova主目录执行命令打包，编译安卓app（首次打包过程可能会很久）

cordova run android

//注意：这里首次打包会很久，并且可能会报错，一般是因为拿不到对应的包所致，需要手动去下载包然后放到对应目录即可解决

最后一步，生成apk文件
cordova build android

cordova build android	//生成apk文件，如下图所示，会在对应的目录下面生成一个apk文件，在手机上或模拟器上面安装即可测试。

在这里插入图片描述
然后我们打开对应目录。就有一个apk文件，把它拿到andriod/模拟器上直接打开运行测试即可。

总结

孤独的小饼干

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
cordova打包web项目

文章目录前言创建Cordova项目的条件一、下载安装Cordova二、新建Cordova项目（创建Cordova打包环境）1.创建Cordova项目2.添加平台3.打包vue项目总结前言Cordova是什么？ Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。Cordova官网创建C
复制链接

扫一扫