教你用Cordova打包Vue项目的方法


Posted in Javascript onOctober 17, 2017

现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。
据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。因为我本身是做angular+ionic的,所以比较青睐cordova,下面我就教大家怎么使用cordova打包Vue项目:

第一步:安装cordova

如果已经安装则直接跳过,否则执行以下命令:

npm install -g cordova

如果这个命令都不会运行,那我建议你不要继续往下看了。

第二步:新建cordova项目

执行命令

cordova create cordovaApp com.cordova.testapp
cd cordovaApp
cordova platform add android

到这里我们的cordova项目就创建好了。

第三步:修改vue项目

如果你没有vue项目的话,自行百度去新建一个vue项目吧。

首先修改vue项目的index.html

在head之间加入

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

这里注意加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">这个的时候可能导致页面样式改变,如果改变则不加,否则还是建议加上。

然后引入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

/* eslint-disable no-new */

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: '',

然后运行

npm run dev

看看是否能够运行起来,如果正常说明到这里是没有问题的。

第四步:将vue文件放到cordova项目中并打包

先在vue项目中运行

npm run build

执行完成后会生成一个dist文件夹,找到这个文件夹将里面的所有文件复制到你的cordova项目的www文件夹下替换它原有的文件。

然后就可以执行

cordova build android

会生成一个可执行的apk文件,安装即可。

到这里就完成了我们vue项目的打包。

友情提示:

如果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')
       }
      },

这段代码注释即可。

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

Javascript 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
javascript常用对话框小集
Sep 13 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
JavaScript Split()方法
Dec 18 Javascript
Vue.use源码分析
Apr 22 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 #Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 #Javascript
javascript 中模板方法单例的实现方法
Oct 17 #Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 #Javascript
react中的ajax封装实例详解
Oct 17 #Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 #Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
php表单处理操作
2017/11/16 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python使用tornado实现简单爬虫
2018/07/28 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python中pow函数用法及功能说明
2020/12/04 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
Tostadora意大利:定制T恤
2019/04/08 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
俄语专业毕业生推荐信
2013/10/28 职场文书
学生手册家长评语
2014/02/10 职场文书
信用卡工资证明格式
2014/09/13 职场文书
2014年档案室工作总结
2014/12/01 职场文书
合同审查法律意见书
2015/06/04 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL
Golang 并发编程 SingleFlight模式
2022/04/26 Golang