封装axios、环境变量、api解耦、解决跨域、全局组件注入

官网：Axios中文文档 | Axios中文网

安装：npm install axios

axios封装：

// 1. 引入axios
import axios from "axios";
import storage from '@/utils/storage'
// 2. 创建axios实例
const instance = axios.create({
   baseURL: process.env.VUE_APP_TITLE === '小政生产环境' ? process.env.VUE_APP_BASE_API : '',
   timeout: 50000
});
 
// 3. 添加请求拦截器
instance.interceptors.request.use(function (config) {
  config.headers.Authorization = storage.getItem('token') // 这里是携带的token
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
 
// 4. 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
 
// 5. 抛出去
export default instance;

环境变量：

与src目录同级新建.env.production和.env.development文件

// .env.production

VUE_APP_TITLE = '小政生产环境' // 必须以VUE_APP开头

VUE_APP_BASE_API = 'www.baidu.com' // 必须以VUE_APP开头

// 然后可以console.log(process.env.VUE_APP_TITLE)打印查看

// .env.development

VUE_APP_TITLE = '小政开发环境' // 必须以VUE_APP开头

VUE_APP_BASE_API = 'www.baidu.com' // 必须以VUE_APP开头

// 然后可以console.log(process.env.VUE_APP_TITLE)打印查看

api解耦：

全局写法：

// api/index.js

import user from './user'

export default {
  ...user
}

// api/user.js

import axios from "@/utils/axios";

export default {
  getUser: (params) => axios.post('/api/v1/login', params)
}

// main.js

import api from '@/api'

/* 注册api */
Vue.use(api)

局部写法：

// api/user.js
import axios from "@/utils/axios";
export function login(data) {
  return axios({
    url: '/login',
    method: 'post',
    data
  })
}
 
export function loginUser () {
  return axios({
      url: '/user/loginUser',
      method: 'get'
  })
}

<template>
  <div>
    测试接口请求
  </div>
</template>

<script>
import { login, loginUser } from '@/api/user.js'
export default {
  methods: {
    FetchLoginUser () {
      loginUser().then(res => {
        console.log('result:', res);
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

 解决跨域：

// vue.config.js

devServer: {
  proxy: {
    // 代理
    '/api': {
      target: 'http://xxx.xxx.xx.xxx:xxxx', // 代理的地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '' // 选择忽略拦截器里面的内容
      }
    }
  }
}

全局组件注入:

与src目录同级新建installComponents

// installComponents/installComponents.js

/* 自动化注册组件 */
export default (Vue) => {
  const requireComponent = require.context(
    // 其组件目录的相对路径
    '@/components',
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /\.(vue|js)$/
  )
  /* 这里循环出来的是components下的每一个文件夹 */
  requireComponent.keys().forEach((path) => {
    const content = requireComponent(path).default
    /* 连js后缀名一起注册 */
    if (content.name) {
    /* content.name 文件夹名 content文件夹内容 */
      Vue.component(content.name, content)
    } else {
      Vue.use(content)
    }
  })
}

// main.js
import installComponents from './installComponents/installComponents'

Vue.use(installComponents)