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

现在国内越来越多的开发者使用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')
       }
      },

这段代码注释即可。

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

时间: 2017-10-16

VS2017 Cordova Ionic2 移动开发环境搭建教程

分享VS2017 Cordova Ionic2 移动开发环境搭建教程 1. 文档概述 本文档用于说明Visual Studio 2017下使用 Ionic 2进行跨平台开发的运行环境配置. 2. 安装环境 Windows10 3. 安装Visual Studio 2017community 3.1 官方下载地址:https://www.visualstudio.com/downloads/ 3.2 运行安装程序,需选中使用JavaScript的移动开发,如下图所示. 3.3 进行VS2017扩展

VS2015在升级到Update2之后运行Cordova项目异常的解决方案

VS2015在升级到Update2之后,有可能出现如下异常,在运行Cordova项目时提示: 查看输出面板会有乱码错误信息: 出现此问题的原因是在于npm程序损坏了.vs调用的npm程序并不是在node安装目录下的npm,而是在: C:\Users\用户名\AppData\Roaming\Microsoft\VisualStudio\MDA\vs-npm\版本号\ 升级完VS之后会发现npm.cmd已经无法启动运行了.所以Cordova项目在运行时,无法使用npm来解析包导致程序无法运行. 解决

ionic cordova一次上传多张图片(类似input file提交表单)的实现方法

我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传,按cordova官方的方法,每次选择完后就直接上传,这并不符合用户的习惯,最好的用户习惯是用户选择完需要的图片,并可在本地预览,接着用户再次打开摄像头或图库再次选择图片,接着预览,对于不需要的图片删除,最后确定可以后,再一次性上传所有图片.显然这种方式,cordova是不支持,那要如何实现呢,以下是我的方法: 通过调用$cordovaImagePicker.getPictures该方法打开图库,获得图片的URL地址,ps:相

ionic2自定义cordova插件开发以及使用(Android)

如何写一个cordova 用于ionic2项目中呢,在搜索了一番之后,千篇一律,我都怀疑那些文章是不是全部都是复制来复制去的,而且都不是很详细.我自己也捣鼓了一下午,踩了很多坑.所以特此写这下这篇,记录一下. 假设需求是 写一个日志插件,可以将日志写在手机的sdcard中. 1.安装plugman npm install -g plugman 2.creat一个插件框架 plugman creat --name 插件名字 --plugin_id 插件id --plugin_version 插件版

NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to

前言: NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or hig

node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法

在使用npm install安装扩展插件时,系统提示"npm install Error: ENOENT, stat 'C:Users<用户名>AppDataRoamingnpm'". 以前都是很顺利的安装过程,没出现这种情况.我这里的解决办法是直接创建上面提示的目录就好了,应该是node.js权限不够,在此备注. 有时候就是这样,很可能一个很久都无法解决的问题,实际解决方法很简单,就是这么任性!!

vue.js中npm安装教程图解

首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Google V8引擎进行的封装.是一个服务器端的javascript的解释器. 包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm -v会发现出啊线npm的版本号,说明npm已经安装好. 引用大神的总结: 其实npm是nodejs的包管理器(package manager).我们在Node.js上开发时,会用到很多别人已经写好的javascript代码,如果每当我们

利用npm 安装删除模块的方法

npm安装模块 [npm install xxx]利用 npm 安装xxx模块到当前命令行所在目录: [npm install -g xxx]利用npm安装全局模块xxx: 本地安装时将模块写入package.json中: [npm install xxx]安装但不写入package.json: [npm install xxx –save] 安装并写入package.json的"dependencies"中: [npm install xxx –save-dev]安装并写入packa

使用npm安装最新版本nodejs

# 安装 nodejs  以下介绍的是命令行安装方法,读者也可以到 nodejs官网 上下载安装最新版. sudo apt-get install nodejs-legacy sudo apt-get instatll npm 升级npm为最新版本 sudo npm install npm@latest -g 往往用命令行安装的nodejs不是最新版本,而且升级nodejs并不是件非常简单的事情:这时我们需要用非常好用的nodejs版本管理模块n sudo npm install -g n 通过

解决修复npm安装全局模块权限的问题

相信我们曾经可能都遇到过全局安装某个模块包的过程中提示EACCESS的错误问题.这是由于npm全局安装模块的默认路径没有权限导致的. 有三个方式可以解决该问题: 修改全局安装路径的权限 修改默认安装路径 借助第三方工具安装node 修改安装路径的权限 查看默认全局安装路径 npm config get prefix 对于大多数系统显示目录为:/usr/local 警告:如果默认路径是在/usr/请跳过该步骤,否则你会搞乱系统权限. 修改路径权限 sudo chown -R (whoami)(wh

用npm安装vue和vue-cli,并使用webpack创建项目的方法

一.npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g 二.在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ cnpm install vue 三.Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ v

卸载安装Node.js与npm过程详解

下面记录一下在本地 Windwos 环境用 vagrant 搭建的虚拟机(Homestaead)和生产环境阿里云 CentOS 系统安装 Node.js 的步骤,以及 npm 安装依赖的不同之处. 使用源码编译的方式安装 node.js.首先将机子上的 Node.js 卸载,我直接贴上 Stack Overflow 上提供的步骤: 1.卸载 npm 和 Node.js 先卸载 npm,命令是:sudo npm uninstall npm -g,然后卸载 Node.js. Running whic

NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解

1.windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的"INSTALL"按钮,直接点击就会自动下载安装了. 2.安装过程基本直接"NEXT"就可以了.(windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如"C:\Program Files\nodejs"). 3.安装完成后可以使

安装SqlServer2005时版本变更检查 (警告)

安装SqlServer2005时"版本变更检查 (警告)"问题排查 今天同事在安装SqlServer2005时遇到"版本变更检查 (警告) "问题导致安装失败,警告提示如下: - 版本变更检查 (警告) 消息 版本变更检查 若要将现有的 Microsoft SQL Server 2005 实例更改为 SQL Server 2005 的其他版本,必须从命令提示符下运行 SQL Server 2005 安装程序并包括 SKUUPGRADE=1 参数. 解决方案:其实警告