封装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.productionVUE_APP_TITLE = '小政生产环境' // 必须以VUE_APP开头VUE_APP_BASE_API = 'www.baidu.com' // 必须以VUE_APP开头// 然后可以console.log(process.env.VUE_APP_TITLE)打印查看

// .env.developmentVUE_APP_TITLE = '小政开发环境' // 必须以VUE_APP开头VUE_APP_BASE_API = 'www.baidu.com' // 必须以VUE_APP开头// 然后可以console.log(process.env.VUE_APP_TITLE)打印查看

api解耦：

全局写法：

// api/index.jsimport user from './user'export default {...user
}

// api/user.jsimport axios from "@/utils/axios";export default {getUser: (params) => axios.post('/api/v1/login', params)
}

// main.jsimport 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.jsdevServer: {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)