vue-cli4 + cordova扫描二维码

最近要实现一个扫码的功能所以要用到cordova的扫描插件，由于不熟捣腾了很久现在记录一下。顺便做个分享。

一. 安装cordova

npm i cordova -g

二. 使用cordova初始化项目

cordova create cordovademo

然后进入 cordovademo 项目目录执行

cordova platform add android

这时如果执行就可以打包编译成一个apk文件在手机上安装了

cordova build android

接下来我们要添加一个vue的项目

三. 添加Vue 项目

1. 直接在cordovademo创建项目就可以了,创建项目时的自定义选项，根据自己需要选择安装

vue create vueapp

2. 配置vue.config.js
   @vue/cli 3x之后 生成的项目都没这个vue.config.js配置文件了。所以这里我们需要自己新建一个vue.config.js文件然后添加上配置

vue.config.js:

module.exports = {
   
    //基本路径
    publicPath: './',
    //输出文件目录
    // outputDir: './www/', //这里定义编译后输出的文件路径
    productionSourceMap:false, //不生成map
}

四. 在vue项目里使用cordova

1. 首先在cordovademo目录下添加摄像头等插件

cordova plugin add cordova-plugin-camera  //支持手机相机与相册调用
cordova plugin add phonegap-plugin-barcodescanner //支持手机扫描二维码

2. 这里使用vue-cordova插件 安装npm install --save vue-cordova
3. 然后到vueapp项目里的index.html添加上<script src="cordova.js"></script>
   
4. 在main.js中引入vue-cordova全局，不过我就没在这添加这个了。不过在这里判断添加cordova.js很重要

import Vue from 'vue'
import MintUI