教你用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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 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
php之字符串变相相减的代码
2007/03/19 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
React实现todolist功能
2020/12/28 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
基于python生成器封装的协程类
2019/03/20 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Python中有几个关键字
2020/06/04 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
Java基础面试题
2014/07/19 面试题
前台文员的岗位职责
2013/11/14 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
父母对孩子的寄语
2014/04/09 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书