封装axios、判断运行环境、使用qs对data传参进行格式转换、请求头设置、登录过期判断

import axios from 'axios'
import router from "../router";
import 'element-ui/lib/theme-chalk/index.css'
import { Message } from "element-ui";
import qs from 'qs'

let NODE_ENV_URL = ''
export const http = config => {
    if (process.env.NODE_ENV === 'production') {
        // 生产模式
        NODE_ENV_URL = window.location.protocol + '//' + window.location.host
    } else if (process.env.NODE_ENV === 'development') {
        // 开发模式
        NODE_ENV_URL = '/api'
    } else if (process.env.NODE_ENV == 'debug') {
        // 调试模式
    }
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: NODE_ENV_URL
            // timeout: 5000
        })
        // 请求拦截
        instance.interceptors.request.use(config => {
            config.method = 'post'
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
            const token = localStorage.j_token
            const username = localStorage.j_username
            // 设置axios为form-data
            if (config.method === 'post') {
                // let data = qs.parse(config.data)
                config.data = qs.stringify({
                    token,
                    username,
                    ...config.data
                })
            } else if (config.method === 'get') {
                config.params = {
                    token,
                    username,
                    ...config.params
                }
            }
            return config
        })
        // 拦截响应
        instance.interceptors.response.use(data => {
            if (data.data.code === -9) {
                // 登录过期
                Message({
                    message: data.data.msg + '，请重新登录！',
                    center: true,
                    type: 'warning'
                })
                localStorage.removeItem('j_username')
                localStorage.removeItem('j_token')
                router.push('/login')
            }
            return data.data
        })
        instance(config).then(res => {
            resolve(res)
        }).catch(rej => {
            reject(rej)
        })
    })
}

vue.config.js

let path = require('path')
let proxy = {}
function resolve (dir) {
    //console.log(__dirname)
    return path.join(__dirname, dir)
}

if (process.env.NODE_ENV === 'production') {
    // 生产模式
    proxy = {}
} else {
    // 开发模式
    proxy = {
        '/api': {
            target: 'url',
            // secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,
            pathRewrite: {
                "^/api": ''
            }
        }
    }
}

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('views', resolve('src/views'))
    },
    devServer: {
        open: true,
        host: 'localhost', // 允许外部ip访问
        port: 8080, // 端口
        https: false, // 启用https
        // 该配置是为了解决前后端联调时出现的跨域问题，将后端域名下的请求代理到本地，从而避免跨域请求
        proxy
    }
}