一、Axios封装
安装Axios

1,在项目目录里面执行 :  npm i -S axios

配置开发环境和生产环境

在根目录下新建两个文件，分别是开发环境和生产环境
.env.development
.env.production


2, .env.development下

# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用
VUE_APP_BASE_API = '接口地址'

3, .env.production下

# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用
VUE_APP_BASE_API = '接口地址'

4, 在src下新建文件件utils->request.js

写入:

import axios from 'axios'
// 创建axios对象
const request = axios.create({
// 根目录下的 .env.development 与 .env.production 中配置 VUE_APP_BASE_API
baseURL: process.env.VUE_APP_BASE_API,  // /dev-api/
timeout:5000  //请求超时时间
})
// 请求拦截器
request.interceptors.request.use(config=>{
// 请求拦截
return config
},error=>{
// 异常
return Promise.reject(error)
})
// 响应拦截器
request.interceptors.response.use(response=>{
// 响应的数据  response.data
return response
},error=>{
// 异常
return Promise.reject(error)
})

export default request  //导出自定义创建的axios对象


5, 在src下面的在main.js中动态获取环境

Vue.config.productionTip = process.env.NODE_ENV === 'development'; //production生产环境  development开发环境

6, 在config文件夹下面index.js的dev里面增加

proxyTable: {
'/': {
target: '域名',//目标接口域名,有端口号记得加上端口号
changeOrigin: true,//是否跨域
pathRewrite: {
'^/': '/'//重写接口,后面可以使重写的新路径，一般不做更改
}
}
},

7,安装qs,在项目目录里面执行 :  npm i qs

下面举例

在src新建文件夹api->httpApi.js

 import request from '@/utils/request'
import qs from 'qs'
export default{
  registers(params){
    console.log(params);
    const req = request({
      headers: {'content-type': 'application/x-www-form-urlencoded'},
      method:'post',
      url:'请求地址',//可以使用baseURL+'地址',baseURL是配置的域名 
     data:qs.stringify(params) //使用qs.stringify是解决跨域后台接收不到参数       
    })
    return req
  }
}


页面代码
//引入httpApi.js


import httpApi from "@/api/httpApi"

methods: {
  submitForm() {
    let params = {
        username: '123',
        password: '456',
       };

    httpApi.registers(params).then(res=>{
      console.log(res)
    })
  },

}