通过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 面向对象编程  function是方法(函数)
Sep 17 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 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
摩卡咖啡
2021/03/03 咖啡文化
转换中文日期的PHP程序
2006/10/09 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python 定时修改数据库的示例代码
2018/04/08 Python
pandas通过索引进行排序的示例
2018/11/16 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
英国航空官网:British Airways
2016/09/11 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
社区七一党员活动方案
2014/01/25 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
中学生评语大全
2014/04/18 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
采购员岗位职责范本
2015/04/07 职场文书
学校通报表扬范文
2015/05/04 职场文书
Java获取字符串编码格式实现思路
2022/09/23 Java/Android