教你用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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 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与XML的PDF文档生成技术
2006/10/09 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
matplotlib绘制动画代码示例
2018/01/02 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python3.5安装python3-tk详解
2019/04/26 Python
python命令行参数用法实例分析
2019/06/25 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
计算机应届毕业生自荐信范文
2014/02/23 职场文书
教学评估实施方案
2014/03/16 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
小露珠教学反思
2014/04/30 职场文书
应届生自荐书
2014/06/23 职场文书
团结主题班会
2015/08/13 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android