教你用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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 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 缓冲的免费实现方法
2006/10/09 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
Javascript 继承实现例子
2009/08/12 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python中pass的作用与使用教程
2020/11/13 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
公开服务承诺制度
2014/03/26 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
卖车协议书
2014/04/21 职场文书
骨干教师考核方案
2014/05/09 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
企业挂职心得体会
2014/09/10 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python