通过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去掉字符串里的所有空格
Feb 08 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
validform表单验证的实现方法
Mar 08 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 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根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php使用GeoIP库实例
2014/06/27 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
Prototype框架详解
2015/11/25 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python类共享变量操作
2020/09/03 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
培训心得体会
2013/12/29 职场文书
经典商业广告词
2014/03/13 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers