问题
- vue-cli3 下环境变量切换问题
调用远程api时候,希望本地开发使用内网IP地址(开发人员本地版本),部署后使用部署版本 - 封装
axios
- api 管理
解决方案
-
环境变量切换
在vue-cli3
中,环境变量是通过 '.env.XXX' 的隐藏文件来配置的,可在 环境变量和模式 中找到解决方案。
所以就直接项目情况,建立了两个文件:-
.env
# 所有环境 # 网络请求公用地址 VUE_APP_API=
-
.env.development
# 开发环境 # 网络请求公用地址 VUE_APP_API=http://api.youproject.com/
-
-
封装
axios
对axios进行封装,包括基础设置,错误处理,跨域请求的基础设置// @/plugin/axios import axios from 'axios' import router from '@/router' import { Toast } from 'vant' // 创建一个 axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_API, timeout: process.env.NODE_ENV === 'development' ? 120000 : 30000 // 请求超时时间 30s }) service.defaults.headers.get['Content-Type'] = 'application/json' service.defaults.headers.put['Content-Type'] = 'application/json' service.defaults.headers.post['Content-Type'] = 'application/json' service.defaults.headers.delete['Content-Type'] = 'application/json' // 响应拦截器 service.interceptors.response.use( function (response) { /* 返回的数据约定 { code: 0, // 99 token 无效 message: "", success: true, data: {} // 返回的数据 } */ // dataAxios 是 axios 返回数据中的 data const dataAxios = response.data // 这个状态码是和后端约定的 const { code, success, message } = dataAxios // 根据 code 进行判断 if (code === undefined) { // 直接返回数据的情况 return dataAxios } else if (!code) { if (success) { if (dataAxios.data === null || dataAxios.data === undefined) { return true } else { return dataAxios.data } } else { Toast.fail(message) return null } } else { // 有 code 代表这是一个后端接口 可以进行进一步的判断 switch (code) { case 0: case 200: // [ 示例 ] code === 0/200 代表没有错误 return dataAxios.data case 99: Toast.fail('token无效,请重新登录') router.replace({ name: 'Unauthorized' }) break default: Toast.fail(`${dataAxios.code} - ${dataAxios.message}`) } } }, function (error) { if (error && error.response) { switch (error.response.status) { case 400: error.message = '请求错误' break case 401: error.message = '授权错误,请登录' break case 403: error.message = '拒绝访问' break case 404: error.message = `请求地址出错: ${error.response.config.url}` break case 408: error.message = '请求超时' break case 422: error.message = '验证出错' break case 500: error.message = '服务器内部错误' break case 501: error.message = '服务未实现' break case 502: error.message = '网关错误' break case 503: error.message = '服务不可用' break case 504: error.message = '网关超时' break case 505: error.message = 'HTTP版本不受支持' break } } Toast.clear() Toast.fail(error.message) return Promise.reject(error) } ) export default service
-
api 管理
在实际项目中,我期望的是api能放在一个统一的地方进行管理,这样在有大变化的时候不用多个文件去查找修改,在编码的时候也方便很多,代码也会清晰点,实现如下// src/api/index.js import common from './common' // ... export default { common, // ... } // src/api/common.js import axios from '@/plugin/axios' export default { getCurrentUserInfo () { return axios.get('/api/common/getCurrentUserInfo.json') }, }
如何使用呢:
// src/main.js import Vue from 'vue' import api from './api' Vue.prototype.$api = api // src/views/business.vue // ... this.$api.common.getCurrentUserInfo().then(res => { // ... }) // ...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。