用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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
javascript数据类型示例分享
Jan 19 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
js 替换
2008/02/19 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
VUE重点问题总结
2018/03/19 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
python基础教程之Filter使用方法
2017/01/17 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
virtualenv介绍及简明教程
2020/06/23 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
事业单位辞职信范文
2014/01/19 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang