通过cordova将vue项目打包为webapp的方法


Posted in Javascript onFebruary 02, 2019

准备工作:需要之前配置好vue-cli脚架构,安装好cordova环境。下面开始对vue.js项目进行打包,打包环境为Android。

可以看下我的github:https://github.com/padipata ,里面有我自己写的vue项目,喜欢的给个关注呗。

1.添加cordova项目

$ cordova create myApp1 org.apache.cordova.myApp myApp2

其中:

  • myApp1:cordova目录名
  • org.apache.cordova.myApp: 包名
  • myApp2: 项目名(在config.xml的<name>中查看)

2.在vue中添加cordova的配置

myApp1/www/index.html----->vue/index.html

  • 将myApp1/www/index.html中所有的<meta>拷贝到vue/index.html中
  • 将myApp1/www/index.html中<script>关于cordova.js的引用拷贝到vue/index.html中

myApp1/www/js/index.js----->vue/vuex/main.js

var app = {
// Application Constructor
initialize: function() {
thisbindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup Common events are:
// 'load', 'deviceready', 'offline', and 'online'
bindEvents: function() {
documentaddEventListener('deviceready', thisonDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event In order to call the 'receivedEvent'
// function, we must explicitly call 'appreceivedEvent();'
onDeviceReady: function() {
appreceivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = documentgetElementById(id);
var listeningElement = parentElementquerySelector('listening');
var receivedElement = parentElementquerySelector('received');
listeningElementsetAttribute('style', 'display:none;');
receivedElementsetAttribute('style', 'display:block;');
consolelog('Received Event: ' + id);
}
};
appinitialize();

1)内容拷贝到vue/src/vuex/main.js中

2)onDeviceReady时启动app

onDeviceReady: function () {
//appreceivedEvent('deviceready');
appRouterstart(App, 'app')
windownavigatorsplashscreenhide()
}

3.创建android项目

终端中进入到myApp1 项目,执行以下命令:

cordova platform add android这时候vue项目中会得到一个android文件夹,里面包含一个测试版本的apk,可以传输到手机上调试。

4.添加cordova插件

终端中进入到vue项目,执行以下命令:

cordova plugin add xxxx

5. 构建 vue项目

通过cordova将vue项目打包为webapp的方法

许多人掉过这个坑,打包出来的apk是一个cordova默认的空白项目,因此,需要在打包vue之前在这里把配置文件修改过来。 

终端中进入到vue项目,执行以下命令:npm run build

6.文件转移

将dist文件夹下的文件,拷贝到cordova/platforms/androd/assets/www目录下 (index.html替代掉原本的)

7.构建cordova项目

从终端进入到myApp1/platforms/android/cordova目录下,执行以下命令:

cordova build android //构建apk 

配置JDK环境(这里只对mac os进行记录,Win系统请自行脑补):

cd ~ 进入到~目录

touch .bash_profile

vi .bash_profile 使用vi编辑器编辑 .bash_profile文件

然后输入 i ,在vi编辑器里面输入 i 的意思是开始编辑。

vi编辑器里面的内容如下:

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_79.jdk/Contents/Home
CLASSPAHT=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
PATH=$JAVA_HOME/bin:$PATH:
export JAVA_HOME
export CLASSPATH
export PATH 

然后退出vi编辑器使用如下命令:(个人习惯 :wq!回车)

1. 输入ese

2. 输入冒号: wq

3. 保存退出

如果以上修改完毕切正确,那么接下来就是让配置的环境变量生效,使用如下命令:source .bash_profile

完毕以后查看下当前的java 版本是否正确输入如下命令:java -version

如果是预想中的1.8,那么恭喜你,你这个时候就可以执行: cordova build android

cordova run android //构建apk,并安装到连接的设备上(按个人需求)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript数字数组去重复项的实现代码
Dec 30 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
原生JS实现层叠轮播图
May 17 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 #Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 #Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 #Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 #Javascript
Electron 如何调用本地模块的方法
Feb 01 #Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 #Javascript
原来JS还可以这样拆箱转换详解
Feb 01 #Javascript
You might like
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
javascript 特殊字符串
2009/02/25 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python字典简介以及用法详解
2016/11/15 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python实现flappy bird小游戏
2018/12/24 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python装饰器原理与用法深入详解
2019/12/19 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
英文版银行求职信
2013/10/09 职场文书
标准导师推荐信(医学类)
2013/10/28 职场文书
新三好学生主要事迹
2014/01/23 职场文书
开学典礼策划方案
2014/05/28 职场文书
物流管理专业推荐信
2014/09/06 职场文书
初婚未育证明样本
2014/10/24 职场文书
开平碉楼导游词
2015/02/06 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers