教你用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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
javascript三种代码注释方法
Jun 02 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
JavaScript实现复选框全选功能
Apr 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模拟HTTP认证
2006/10/09 PHP
php创建sprite
2014/02/11 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP递归算法的简单实例
2019/02/28 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python33 urllib2使用方法细节讲解
2013/12/03 Python
python实现自动重启本程序的方法
2015/07/09 Python
python绘制双柱形图代码实例
2017/12/14 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
python中的对数log函数表示及用法
2020/12/09 Python
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
八年级美术教学反思
2014/02/02 职场文书
学习经验演讲稿
2014/05/10 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
销售员岗位职责范本
2015/04/11 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android