在实际项目开发中，完整项目分为测试环境和正式环境！这也就意味着前端vue项目中我们需要配置测试环境和正式环境，但如果我们需要根据实际情况一次打包在多个环境中使用我们要如何处理呢？

原理解析（axios为例）：在static文件夹中创建一个config.js，里面配置你得正式域名或测试域名。封装一个axios，每次调用时直接调用封装得调用方法。在封装方法中直接调用config.js中得域名（注：不使用代理）

Q:这里我们为什么把config.js创建在static文件夹中呢？

W:static文件中得内容不会被编译，会被直接复制进去，这样就方便在打包后我们自主修改测试域名或者正式域名。通过这里得配置便不需要我们多次打包。

Q:config文件夹中proxyTable还需要域名配置吗？

W:不需要了，因为封装中得域名调用已经完成了连接请求操作。

操作步骤：

1、static文件中中创建config.js，内容如下：

var  baseUrl = 'https://www.baidu.com/'

2、项目根目录下引入config.js文件

3、封装axios，引用config.js中得域名

import axios from 'axios'
import {Message, MessageBox} from 'element-ui'
import {getCookies,setCookies,removeCookies} from '@/utils/cookies'
// 创建axios实例
let service = axios.create({
    baseURL: baseUrl+'/test/', // api 的 base_url
    timeout: 1000 * 30,
    crossDomain: true,//设置cross跨域
    withCredentials: false,//设置cross跨域 并设置访问权限 允许跨域携带cookie信息
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Control-Allow-Credentials': 'true',
    }
})
// 设置 post 默认 Content-Type
// service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// request拦截器
service.interceptors.request.use(
    config => {
        if (getCookies('token')) {
            // if (process.env.NODE_ENV === 'development') {
            //     // 让每个请求携带自定义token 请根据实际情况自行修改
            //     config.headers['token'] = ''
            //     // config.headers['token'] = getToken()
            // }
            // config.headers['token'] = getCookies('token')
            // config.headers['token'] = getToken()
        }
        return config
    },
    error => {
        // Do something with request error
        console.log(error) // for debug
        Promise.reject(error)
    }
)

export function checkAuth(res) {
    if (res.code === 2001 || res.code === 2002) {
        MessageBox.confirm(
            '登录状态已过期，您可以继续留在该页面，或者重新登录',
            '系统提示',
            {
                confirmButtonText: '重新登录',
                cancelButtonText: '取消',
                type: 'warning'
            }
        ).then(() => {
            // store.dispatch('Logout').then(() => {
            //     location.reload() // 为了重新实例化vue-router对象 避免bug
            // })
        })
    }
    // else if (res.code === 2003) {
    //   Message.error(res.msg)
    // }
}

// response 拦截器
service.interceptors.response.use(
    response => {
      // console.log(response)
        // const code = response.status
        // if (code < 200 || code > 300) {
        //     Message.error(response.message)
        //     return Promise.reject('error')
        // } else {
        //     if (response.config && response.config.responseType === 'arraybuffer') {
        //         const gettype = Object.prototype.toString
        //         // console.log(gettype.call(response.data))
        //         if (gettype.call(response.data) === '[object ArrayBuffer]') {
        //             // axioxRespDownload(response)
        //             return {code: 1000, msg: 'success'}
        //         } else {
        //             checkAuth(response.data)
        //             return response.data
        //         }
        //     } else {
        //         checkAuth(response.data)
        //         return response.data
        //     }
        // }
        return response.data
    },
    error => {
      console.log("异常：：",error.message)
      removeCookies('token')
      removeCookies('user')
        MessageBox.confirm(
            '您的账号登录失效，请从新登录！',
            '登录失效',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'error'
            }
        ).then(() => {
          this.$router.push({path:'/phone'})
          // window.location.href="/phone"
        })
        return Promise.reject(error)
    }
)
export default service

以上便完成了一次打包多次部署得操作，剩下得时关于axios得使用，本文就不多加讲解。如果疑惑后期会专门就请求封装写一篇完整示例！