一、封装axios
    建一个request.js文件，里面导出axios实例，可以在各个api文件中使用。

    1. import axios from 'axios'
    2. import { MessageBox, Message } from 'element-ui'
    3. import store from '@/store'
    4. import { getToken } from '@/utils/auth'
    5. //引入axios、UI提示组件、store和token工具
    7. //（1） create an axios instance 创建一个axios实例，想将baseUrl传入并保存。
    8. const service = axios.create({
    9.   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    10.   // withCredentials: true, // send cookies when cross-domain requests
    11.   timeout: 5000 // request timeout
    12. })
    14. // （2）request interceptor 使用axios的拦截器，在此统一操作请求，比如加上token
    15. service.interceptors.request.use(
    16.   config => {
    17.     // do something before request is sent
    19.     if (store.getters.token) {
    20.       // let each request carry token
    21.       // ['X-Token'] is a custom headers key
    22.       // please modify it according to the actual situation
    23.       config.headers['X-Token'] = getToken()
    24.     }
    25.     return config
    26.   },
    27.   error => {
    28.     // do something with request error
    29.     console.log(error) // for debug
    30.     return Promise.reject(error)
    31.   }
    32. )
    34. // （3）response interceptor 统一处理相应数据，
    35. //      前一个callback是后台响应成功的处理，该处理函数里面再针对custom code判断各种情况
    36. //      后一个是后台响应失败的处理方式
    37. service.interceptors.response.use(
    38.   /**
    39.    * If you want to get http information such as headers or status
    40.    * Please return  response => response
    41.   */
    43.   /**
    44.    * Determine the request status by custom code
    45.    * Here is just an example
    46.    * You can also judge the status by HTTP Status Code
    47.    */
    48.   response => {
    49.     const res = response.data
    51.     // if the custom code is not 20000, it is judged as an error.
    52.     // 通过custom code先判断非正常响应情况,返回Promise.reject()，
    53.     // 返回一个状态为rejected的promise实例 后面的catch回调会立即执行
    54.     if (res.code !== 20000) {
    55.       Message({
    56.         message: res.message || 'Error',
    57.         type: 'error',
    58.         duration: 5 * 1000
    59.       })
    61.       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
    62.       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
    63.         // to re-login
    64.         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
    65.           confirmButtonText: 'Re-Login',
    66.           cancelButtonText: 'Cancel',
    67.           type: 'warning'
    68.         }).then(() => {
    69.           store.dispatch('user/resetToken').then(() => {
    70.             location.reload()
    71.           })
    72.         })
    73.       }
    74.       return Promise.reject(new Error(res.message || 'Error'))
    75.     } else {
    76.       return res
    77.     }
    78.   },
    79.   error => {
    80.     console.log('err' + error) // for debug
    81.     Message({
    82.       message: error.message,
    83.       type: 'error',
    84.       duration: 5 * 1000
    85.     })
    86.     return Promise.reject(error)
    87.   }
    88. )
    90. export default service

    二、多环境
    （1）vue/cli模式：
    vue/cli 执行vue-cli-service命令时，添加 —mode可以选择vue/cli模式，会加在对应环境文件，如果没有NODE_ENV变量，它的值将取决于模式。
    （2）模式作用：
    不同的NODE_ENV决定了vue/cli生成哪种webpack配置，NOED_ENV为development时，webpack会配置热更新，为test时，会创建专门用于测试的webpack配置，为production的时候，会创建打包用的webpack配置。
    （3）环境文件：
    环境文件只包含’键=值’，换行，#用来写注释。模式为prodction的时候，vue/cli会加载 .env.production环境文件，—mode可以覆盖默认模式，模式为productionBuild的时候，会加载.env.productionBuild文件。
    在request创造axios实例时，引用process.env.NODE_ENV进行判断，动态设置baseUrl。

    三、跨域问题
    开发环境中，前端可以使用webpack-dev-server的proxy来反向代理。