1. // vue.config.js
    2. module.exports = {
    3.   // lintOnSave: false,
    4.   publicPath: './',
    5.   outputDir: 'dist',
    6.   // transpileDependencies: [
    7.   //   /@lerna-demo/
    8.   // ],
    9.   devServer: {
    10.     host: process.env.VUE_APP_BASE_HOST,
    11.     port: process.env.VUE_APP_BASE_PORT,
    12.     overlay: {
    13.       warnings: false,
    14.       errors: true
    15.     },
    16.     proxy: {
    17.       '/api': {
    18.         target: process.env.VUE_APP_BASE_API,
    19.         changeOrigin: true
    20.       },
    21.     }
    22.   }  
    23. }
    1. // .env.development
    2. ENV = 'development'
    4. # base api
    5. VUE_APP_BASE_API = 'http://192.168.9.83'
    6. VUE_APP_BASE_PORT = 3000
    7. VUE_APP_BASE_HOST = 192.168.9.83
    1. // http.js
    2. /**
    3.  * axios封装
    4.  * 请求拦截、响应拦截、错误统一处理
    5.  */
    6. import axios from 'axios'
    7. import qs from 'qs'
    8. import {
    9.   Message
    10. } from 'element-ui'
    12. /**
    13.  * 提示函数
    14.  * 禁止点击蒙层、显示一秒后关闭
    15.  */
    16. const tip = (msg) => {
    17.   Message({
    18.     message: msg,
    19.     duration: 1000 * 5,
    20.     type: 'error'
    21.   })
    22. }
    24. /**
    25.  * 跳转登录页
    26.  * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
    27.  */
    28. const toLogin = () => {
    30. }
    32. /**
    33.  * 请求失败后的错误统一处理
    34.  * @param {Number} status 请求失败的状态码
    35.  */
    36. const errorHandle = (status, other) => {
    37.   // 状态码判断
    38.   switch (status) {
    39.     // 100: 请求参数有误
    40.     case 400:
    41.       tip(other)
    42.       // toLogin();
    43.       break
    44.       // 403 token过期
    45.       // 清除token并跳转登录页
    46.     case 101:
    47.       tip('无权限查看')
    48.       setTimeout(async () => {
    49.         toLogin()
    50.       }, 1000)
    51.       break
    52.       // 404请求不存在
    53.     case 401:
    54.       tip(other)
    55.       setTimeout(async () => {
    56.         toLogin()
    57.       }, 1000)
    58.       break
    59.     case 404:
    60.       tip(other)
    61.       break
    62.     default:
    63.       console.log('other', other)
    64.   }
    65. }
    67. // 创建axios实例
    68. var instance = axios.create({
    69.   timeout: 0
    70. })
    71. // 设置post请求头
    72. instance.defaults.headers.post['Content-Type'] =
    73.   'application/json;charset=UTF-8'
    74. instance.defaults.baseURL = process.env.VUE_APP_BASE_API
    76. /**
    77.  * 请求拦截器
    78.  * 每次请求前，如果存在token则在请求头中携带token
    79.  */
    81. instance.interceptors.request.use(
    82.   (config) => {
    83.     // 登录流程控制中，根据本地是否存在token判断用户的登录情况
    84.     // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
    85.     // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    86.     // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
    87.     // const token = store.state.user.token
    88.     // const uid = store.state.user.uid
    89.     // token && (config.headers['access-token'] = token)
    90.     // uid && (config.headers['token-uid'] = uid)
    91.     return config
    92.   },
    93.   (error) => Promise.error(error)
    94. )
    96. // 响应拦截器
    97. instance.interceptors.response.use(
    98.   // 请求成功
    99.   (res) => {
    100.     const {
    101.       data
    102.     } = res
    103.     if (data.code === 200) {
    104.       return Promise.resolve(data)
    105.     } else {
    106.       errorHandle(data.code, data.msg)
    107.       return Promise.reject(res)
    108.     }
    109.   },
    110.   // 请求失败
    111.   (error) => {
    112.     const {
    113.       response
    114.     } = error
    115.     if (response) {
    116.       // 请求已发出，但是不在0的范围
    117.       errorHandle(response.code, response.msg)
    118.       return Promise.reject(response)
    119.     } else {
    120.       // 处理断网的情况
    121.       // eg:请求超时或断网时，更新state的network状态
    122.       // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
    123.       // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
    124.       if (!window.navigator.onLine) {
    125.         // store.commit('changeNetwork', false)
    126.       } else {
    127.         return Promise.reject(error)
    128.       }
    129.     }
    130.     return Promise.reject(error)
    131.   }
    132. )
    134. const get = (url, params = {}) => {
    135.   return instance.get(url, {
    136.     params
    137.   })
    138. }
    140. const post = (url, params = {}) => {
    141.   return instance.post(url, qs.stringify(params), {
    142.     headers: {
    143.       'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    144.     }
    145.   })
    146. }
    147. export {
    148.   get,
    149.   post
    150. }