vue.config.js设置文件夹别名、配置代理，以及axios的简易封装和使用

一、设置文件夹别名和配置代理

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, './src'),
        '@/pages': path.join(__dirname, './src/pages'),
        '@/components': path.join(__dirname, './src/components'),
        '@/api': path.join(__dirname, './src/api'),
        '@/utils': path.join(__dirname, './src/utils')
      }
    }
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'https://crmservice-test.mistong.com',
        changeOrigin: true,
        pathRewrite: { '^api': '' }
      }
    }
  }
}

如果axios初始化设置了baseURL: '/erp'，pathRewrite中要这样写：

二、axios拦截器封装和使用

1、utils/fetch.js

import axios from 'axios'

const service = axios.create()

// request 拦截器
service.interceptors.request.use(
  config => {
    const token = '1768-2-b6c8285a90eb9101a26e97aad6a5f871'
    const tempConfig = { ...config }
    if (token) tempConfig.headers['spm-token'] = token
    return tempConfig
  },
  error => {
    return Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    const { data } = response
    const { success } = data
    if (!success) return Promise.reject(data)
    return data
  },
  error => Promise.reject(error)
)

export default service

2、api/request.js

import fetch from '@/utils/fetch'

export const listApi = params =>
  fetch.get('/api/flowAudit/getMySponsorTask', { params })

3、组件中使用

import { listApi } from '@/api/request'

  methods: {
    async getList() {
      const params = { page: 1, pageSize: 10, flowTrackType: 2 }
      const { success, data } = await listApi(params)
      if (success) {
        console.log(data)
      }
    }
  }