1.下载axios

npm i axios

2.新建utils工具目录

3.创建config.js、、request.js、api.js

一、config.js用于配置不同环境下的baseURL（开发环境或者打包环境）

//config.js
export default {baseUrl: {dev: '',pro: ''}
}

二、request.js用于封装axios方法（配置拦截器、配置公共配置）

//request.js
import axios from "axios"
import config from './config.js'//判断环境来获取不同的url
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.proclass axiosRequest {constructor(baseUrl) {this.baseUrl = baseUrl}getConfig() {//公共基础配置const config = {baseURL: this.baseUrl,header: {}}return config}interceptor(instance) {//给实例配置拦截器// 添加请求拦截器instance.interceptors.request.use(function(config) {// 在发送请求之前做些什么return config;}, function(error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(function(response) {// 对响应数据做点什么return response;}, function(error) {// 对响应错误做点什么// console.log(error)return Promise.reject(error);});}request(options) {//新建实例并配置实例并可传参const instance = axios.create() //新建axios实例options = {...this.getConfig(),...options} //参数（baseURL、其他参数）this.interceptor(instance) //给axios实例添加拦截器return instance(options) //给axios实例添加参数}}export default new axiosRequest(baseUrl) //暴露实例

三、api.js用于存放各个不同的接口请求方法

//api.js
import http from './request.js'
//用于存放各种专门的获取api的函数
//之后哪个组件需要使用axios就直接调用此js文件的方法
export const getData = () => {return  http.request({url: '/home/getData'})
}