码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli 配置项以及请求的封装

时间:2019-11-13 16:41:03      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:params   export   int   根据   配置   origin   component   ora   url   

 

 在 vue.config.js中

配置路径缩写

  const path = require(‘path‘)
  const resolve = dir => path.join(__dirname, dir)
chainWebpack: config => {
  config.resolve.alias
    .set(‘@views‘, resolve(‘src/views‘))
    .set(‘@styles‘, resolve(‘src/styles‘))
    .set(‘@comp‘, resolve(‘src/components‘))
    .set(‘@config‘, resolve(‘src/config‘))
    .set(‘@request‘, resolve(‘src/common/libs/request‘))
}

 

配置代理

devServer: {
  open: true,
  host: ‘localhost‘,
  proxy: {
    ‘/api‘: {
      target: ‘http://test-api-health.yibung.com‘,
      changeOrigin: true,
      pathRewrite: {
        ‘^/api‘: ‘‘
      }
    }
  }
}

 

封装请求--这里用的是 axios

import axios from ‘axios‘
import envConfig from ‘@/common/env.config.js‘
import store from ‘@/store‘
import router from ‘@/router/router.js‘

// 设置请求参数,并判断是否存在token
const hasTokenHandler = () => {
  // 获取token
  let AUTH_TOKEN = store.state.userInfo ? store.state.userInfo.token : null
  // 如果在 store 里面没找到,再尝试从 localStorage 中获取
  if ((!AUTH_TOKEN || AUTH_TOKEN === ‘‘) && localStorage.getItem(‘familyHealth‘)) {
    let familyHealth = JSON.parse(localStorage.getItem(‘familyHealth‘))
    let token = familyHealth.token
    AUTH_TOKEN = token
  }
  axios.defaults.baseURL = envConfig.ajaxBaseUrl
  axios.defaults.headers[‘Authorization‘] = AUTH_TOKEN
  axios.defaults.headers.post[‘Content-Type‘] = ‘application/json‘
  if (!AUTH_TOKEN) {
    return false
  } else {
    return true
  }
}

// 根据token进行路由拦截
const tokenIntercept = () => {
  let hasToken = hasTokenHandler()
  let nowUrl = decodeURIComponent(window.location.href.replace(window.location.origin, ‘‘))
  if (!hasToken && !nowUrl.includes(‘/login‘)) {
    router.push(‘/login?reload=‘ + nowUrl)
    return false
  } else {
    return true
  }
}

// response数据处理
const responseDataHandler = (ret) => {
  // 请求成功
  if (ret && ret.status === 200 && ret.data.code === ‘0‘) {
    return ret.data
  } else { // 请求失败
    if (ret.data.code === ‘001‘) { // token失效
      let nowUrl = decodeURIComponent(window.location.href.replace(window.location.origin, ‘‘))
      router.push(‘/login?reload=‘ + nowUrl)
    } else if (ret && ret.data && ret.data.code) { // 如果有code,说明请求成功到达后台并返回---正常
      return ret.data
    } else { // 没有code,未知错误
      return {
        code: 0,
        data: null,
        msg: ‘服务器错误‘
      }
    }
  }
}

// 根据不同的method类型,进行相应的 axios 调用
const methodType = async (type, url, param = {}) => {
  if (!tokenIntercept()) {
    return null
  }
  let params = param
  if (type === ‘get‘ || type === ‘delete‘) params = { params }
  let ret = await axios[type](url, params)
  return responseDataHandler(ret)
}

const $http = {
  get: (url, params) => methodType(‘get‘, url, params),
  post: (url, params) => methodType(‘post‘, url, params),
  put: (url, params) => methodType(‘put‘, url, params),
  delete: (url, params) => methodType(‘delete‘, url, params)
}

export default $http

 

src/common/env.config.js

// 开发环境
const dev = {
  NODE_ENV: ‘development‘,
  ajaxBaseUrl: ‘http://localhost:8080/api‘,
  origin: ‘http://localhost:8080‘
}


const prod = {
    ajaxBaseUrl: ‘http://test-api-health.yibung.com‘
};

const result = () => {
  if (process.env.NODE_ENV === ‘development‘) {
    return dev
  }
  return prod;
}

module.exports = result()

 

 

 

 

 

 

 

vue-cli 配置项以及请求的封装

标签:params   export   int   根据   配置   origin   component   ora   url   

原文地址:https://www.cnblogs.com/haishen/p/11210396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!