Vue CLI项目下，axios二次封装及配置打包环境

1.axios二次封装

1.1 新建文件目录

• project/src/utils/request.js
• project/src/api/api.js

1.2 封装axios

// project/src/utils/request.js
import axios from 'axios'

const service = axios.create({
	baseURL: buildURL,  // 请求地址
	timeout: 1000 * 5  // 超市时间
})

// 请求拦截器
service.interceptors.request.use(function(config) {
	// 对请求进行处理
	// config.headers['token']
	return config
}, function(error) {
	return Promise.reject(error);
})

// 响应拦截器
service.interceptors.response.use(function(response) {
	return response;
}, function(error) {
	// 错误处理
	if (error && error.response) {
		switch (error.response.status) {
			case 401:
				alert('401身份认证过期')
				break;
			case 404:
				alert('404请求出错')
				break;
			case 500:
				alert('500服务器错误')
				break;
			default:
		}
	}
})

export default service

1.3 封装请求

// project/src/api/api.js
import request from '../utils/request.js'

// 请求地址
const api = {
	login:'localhost:8080', // 登录
	// ...
}

// 请求
export function login(params) {
	return request({
		url: api.login,
		method: 'post',
		params
	})
}
//...

1.4 页面内使用

// 登录页面
import { login } from '../../api/api.js'

export default {
	name: 'login',
	data() {
		return {
			loginInfo:{
				username: '',
				password: '',
			}
		}
	},
	methods: {
		onLogin() {
			// 发起请求
			login(loginInfo).then(res => {
				if (res.data.errorCode) {
					// alert(res.data.errorMessage)
				} else {
					// do something
				}
			})
			.catch(error => {
				// alert(error)
			})
		}
	}
}

2.配置打包环境

2.1 项目下新建三个文件

文件名：.env.development （开发环境）
代码：

NODE_ENV = 'development'
VUE_APP_TITLE = 'build-dev'

文件名：.env.production （生产环境）
代码：

NODE_ENV = 'production'
VUE_APP_TITLE = 'build-pro'

文件名：.env.test （测试环境）
代码：

NODE_ENV = 'test'
VUE_APP_TITLE = 'build-test'

2.2 修改package.json文件

"scripts": {
    "serve": "vue-cli-service serve",
    "build-dev": "vue-cli-service build --mode development",
    "build-pro": "vue-cli-service build --mode production",
    "build-test": "vue-cli-service build --mode test"
}

2.3 配置buildURL

// request.js
let buildURL = ''

switch (process.env.NODE_ENV) {
	case 'development':
		buildURL = "开发环境地址"
		break
	case 'production':
		buildURL = "生产环境地址"
		break
	case 'test':
		buildURL = "测试环境地址"
		break
}

2.4 使用

• 打包开发环境：npm run build-dev
• 打包生产环境：npm run build-pro
• 打包测试环境：npm run build-test