第一步：在目录夹里面建立一个utils文件夹里创建一个request.js文件写入：

import axios from "axios";
// 创建axios实例
const service = axios.create({
  baseURL: "http://192.168.1.1", // api的base_url
  timeout: 5000 // 请求超时时间
});

第二步：在vue.config.js中配置：

devServer: {
      port: 80, //端口号
      open: true, //自动启动浏览
      proxy: {
        "/api": {
          target: "http://192.168.1.1", // target host
          ws: true, // proxy websockets
          changeOrigin: true, // needed for virtual hosted sites
          pathRewrite: {
            "^/api": "" // rewrite path
          }
        }
      }
    }
  },

第三步：创建api目录 xxx.js

import request from "@/utils/request";

export function picPage(params) {
  return request({
    url: "/pub/xxx",
    method: "get",
    params
  });
}

import request from "@/utils/request";

export function loginList(phone, pwd) {
  return request({
    url: "/pub/login",
    method: "post",
    data() {
      phone, pwd;
    }
  });
}

第四步：调用封装axios

1.导入封装的api.js

import {xxx} from '@/api/xxx'

2.传参
params传参

xxx({key:value}).then(res=>{
//这里写业务逻辑
.catch(function(error) {
        window.console.log(error);
      });
})

data传参

image.png