axios二次封装+vue-cli3.0实现2.0中dev.env,prod.env对本地路径和线上路径的管控+多环境打包环境的部署

前言：

      1、 axios的二次封装+vue-cli.3.0中对路径控制，

       2、在2.0中我们可以通过config里面的 dev.env.js , prod.env.js 实现对路径的管控，但是在3.0中是没有这个东西的，在这里有实现这个的方法，相比2.0使用更加简单。

第一：在src下面新建一个api的文件夹，里面包括axios的封装axios.js,和路径管理的config.js文件

axios.js：

***注意，暂时没有放公共token。我是打算放到config.js里面的

import axios from 'axios'
import qs from 'qs'
// 在config.js文件中统一存放一些公共常量，方便之后维护
import {baseURL} from './config.js'

// 添加请求拦截器，在发送请求之前做些什么(**具体查看axios文档**)--------------------------------------------
axios.interceptors.request.use(config => {
        // 显示loading
        return config
    },
    error => {
        // 请求错误时弹框提示，或做些其他事
        return Promise.reject(error)
    })

// 添加响应拦截器(**具体查看axios文档**)----------------------------------------------------------------
axios.interceptors.response.use(response => {
    // 对响应数据做点什么，允许在数据返回客户端前，修改响应的数据
    // 如果只需要返回体中数据，则如下，如果需要全部，则 return response 即可
    return response
}, err => {
    // 对响应错误做点什么
    if (err && err.response) {
        switch (err.response.status) {
            case 400:
                console.log('错误请求');
                break;
            case 401:
                console.log('未授权，请重新登录');
                break;
            case 403:
                console.log('拒绝访问');
                break;
            case 404:
                console.log('请求错误,未找到该资源');
                break;
            case 405:
                console.log('请求方法未允许');
                break;
            case 408:
                console.log('请求超时');
                break;
            case 500:
                console.log('服务器端出错');
                break;
            case 501:
                console.log('网络未实现');
                break;
            case 502:
                console.log('网络错误');
                break;
            case 503:
                console.log('服务不可用');
                break;
            case 504:
                console.log('网络超时');
                break;
            case 505:
                console.log('http版本不支持该请求');
                break;
            default:
                console.log(`连接错误${err.response.status}`)
        }
    } else {
        console.log('连接到服务器失败')
    }
    return Promise.resolve(err.response)
    // return Promise.reject(error)
});

// 封装数据返回失败提示函数---------------------------------------------------------------------------
function errorState(response) {
    // 隐藏loading
    // 如果http状态码正常，则直接返回数据
    if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
        // 如果不需要除了data之外的数据，可以直接 return response.data
        return response
    } else {
        console.log('数据获取错误')
    }
}

// 封装数据返回成功提示函数---------------------------------------------------------------------------
function successState(res) {
    // 隐藏loading
    // 统一判断后端返回的错误码(错误码与后台协商而定)
    if (res.data.code === '000000') {
        alert('success');
        return res
    }
}

// 封装axios--------------------------------------------------------------------------------------
function http(method, url, isForm, params) {
    let paramsObject = params;
    if (params && params.params) {
        paramsObject = params.params;
    }
    let httpDefault = {
        method: method,
        baseURL: baseURL,
        url: url,
        params: method === 'GET' || method === 'DELETE' ? paramsObject : null,// `params` 是即将与请求一起发送的 URL 参数
        // qs.stringify(params) : null,//qs转换,json字符串转换，直接传对象，三种方法请根据实际情况使用
        data: method === 'POST' || method === 'PUT' || method === 'PATCH' ? paramsObject : null,// `data` 是作为请求主体被发送的数据
        timeout: 10000
    };

    httpDefault.headers = {
        'Content-Type': 'application/json',
        AccessToken: ''//可以在登录那里填充，也可以用vuex填充，也可以在config.js中获取在放过来
    };
    if(isForm){//如果是formData格式的，使用这个请求头
        httpDefault.headers = {
            'Content-Type': 'multipart/form-data',
            AccessToken: ''
        };
    }

    // 注意**Promise**使用(Promise首字母大写)
    return new Promise((resolve, reject) => {
        axios(httpDefault)
        // 此处的.then属于axios
            .then((res) => {
                successState(res);
                resolve(res);
            }).catch((response) => {
            errorState(response);
            reject(response);
        })
    })
}

// 输出函数getAxios、postAxios、putAxios、delectAxios，供其他文件调用-----------------------------
// Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
export default {
    install: function (Vue) {
        Vue.prototype.$get = (url, params) => http('GET', url,false, params);
        Vue.prototype.$post = (url, params) => http('POST', url, false,params);
        Vue.prototype.$postForm = (url, params) => http('POST', url, true,params);
        Vue.prototype.$put = (url, params) => http('PUT', url,false, params);
        Vue.prototype.$delete = (url, params) => http('DELETE', url, false,params);
        Vue.prototype.$patch = (url, params) => http('PATCH', url,false, params);
    }
}

config.js:

***3.0比2.0的要简单直接判断是否为开发环境就可以直接加自己的路径请求头了，但是根据实际需要的不同可能需要多环境的路径，比如下面的'test'测试完成的路径，请看最下面的方法

// axios中请求配置有baseURL选项，表示请求URL公共部分。
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
let baseURL = ""; //这里是一个默认的url，可以没有
switch (process.env.NODE_ENV) {
    case 'development':
        baseURL = "http://192.168.8.106:11000/wisdomteam-business/" //这里是本地的请求
        break
    case 'test':
        baseURL = "http://www.xxx.com.cn/test" // 测试环境
        break
    case 'production':
        baseURL = "http://10.1.206.80:11000/wisdomteam-business/" //生产环境
        break
}

export default baseURL;

第二：在main里面注册

import axiosApi from '@/api/axios.js'//封装axios文件
Vue.use(axiosApi);

第三：调用方法

*** params:你给后台传的数据，git,delete会拼接到params里面，put,patch,post会传到data里面
//1、get请求为案例
 this.$get(this.comUrl+'partymass/culturalConcepts/selectList',{
        //一个对象，给后台传的值，跟axios原生的是一样的，直接传就行
        //例如：a:1,b:2
      }).then(res=>{
            成功操作
        })
//其他的几种请求，把$get改成$post,$put,$delete,$patch
//2、传参方式
  get的一般是用两种，一种是url路径拼接，直接在params里面传，或者路径后面拼
        另一种用 &隔开 ：
             let param = new URLSearchParams();
                 param.append("zblx", 111);
  post上传有三种，一种直接传对象，一种转成json字符串，一种用qs，方法里面有，可以根据自己需求改动

到这里，公共axios封装的就结束了，下面这里在说下vue-cli3.0中使用多环境路径的方法：

        3.0默认只支持两个环境（即测试环境、生产环境）,通过   process.env.NODE_ENV === 'production' ?a路径:b路径; 可以设置他本地测试的路径，和打包出来的生产环境路径，所以我们想实现多路径得自己配置，

步骤一：在跟目录下新建文件 .evn.test     *.evn 是必须的后面可以加上我们想加的环境路径的名字，比如  test

步骤二：在 package.json 文件里面写上我们新配置的 test 打包命令

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test" 
  },


 "test": "vue-cli-service build --mode test" 是我们新加的，

 "你的名字":"vue-cli-service build --mode 你的名字"

步骤三：

         测试你的打包路径，比如我这里是在config.js里面定义的三个路径，如果你有需要，在继续加就行了，加文件，加命令，

运行 npm run build  可以得到 production 的路径
运行 npm run test   可以得到 test 的路径