用Cordova打包Vue项目的方法步骤


Posted in Javascript onFebruary 02, 2019

现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。

现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目:

第一步:安装cordova,创建好cordova项目。

第二步:修改vue项目

首先修改vue项目的index.html,引入cordova.js。这个引入在浏览器打开会报错。要打包后运行在真机后方可看到效果

<body>
 <div id="app"></div>
 <script type="text/javascript" src="cordova.js"></script>
 <!-- built files will be auto injected -->
</body>

然后修改src中的main.js为以下代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
document.addEventListener('deviceready', function() {
 new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
 })
 window.navigator.splashscreen.hide()
}, false);

最后修改config文件夹中的index.js文件,修改build中的

assetsSubDirectory: 'static',
assetsPublicPath: '/',

assetsSubDirectory: '',
assetsPublicPath: '',

第三步:运行

看看是否能够运行起来,如果正常说明到这里是没有问题的(注意这里运行的时候需要将document.addEventListener注释,
因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件,打包在真机上才能实现监听)。

第四步:将vue打包好的文件放到cordova项目中并打包cordova run android,会生成一个可执行的apk文件,也可以直接在真机上运行。安装即可。

友情提示:

如果vue项目在运行npm run dev或者npm run build的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npm install安装。

如果是因为eslint导致代码检查不通过的话,可以将Vue项目的build文件夹下的webpack.base.config文件中的rules

{
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   enforce: 'pre',
   include: [resolve('src'), resolve('test')],
   options: {
   formatter: require('eslint-friendly-formatter')
   }
  },

这段代码注释即可。

PS:通过cordova将vue项目打包成app

一、创建一个cordova工程

cordova create cordovaVue

cd cordovaVue
  • config.xml -包含应用相关信息,使用到的插件以及面向的平台
  • platforms - 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
  • plugins - 包含应用所需插件的 Cordova 库,使得应用能够访问例如照相机和电池状态相关的事项。
  • www - 包含应用源代码,例如 HTML, JavaScript 和 CSS 文件
  • hooks - 包含为个性化应用编译系统所需的脚本 

二、添加安卓平台

cordova platform add android --save

三、在vue项目中生成编译完成的源文件

npm run build

四、将cordova项目中的www文件夹下的内容替换为vue项目中生成的dist文件夹中的内容 

五、在cordova项目中创建Android应用

cordova build android

六、将手机连接在电脑上,运行该 Android 程序

cordova run android

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

Javascript 相关文章推荐
jQuery源码分析-01总体架构分析
Nov 14 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
js操作数组函数实例小结
Dec 10 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 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
微信小程序拍照和摄像功能实现方法示例
Feb 01 #Javascript
You might like
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
讲解Python中的标识运算符
2015/05/14 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
文科教师毕业的自我评价
2014/01/16 职场文书
周年庆促销方案
2014/03/15 职场文书
2014国庆节标语口号
2014/09/19 职场文书
给老婆的道歉信
2015/01/20 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
配置Kubernetes外网访问集群
2022/03/31 Servers