Vue封装axios请求

前端封装axios

import axios from 'axios'
//参数序列化
//qs.parse()是将URL解析成对象的形式
//qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
import qs from "qs";
import Vue from 'vue'
import router from './router'
//判断是生产环境还是开发环境
const baseURL = process.env.NODE_ENV === 'production' ? process.env.BASE_API : "/taxation"
const http = axios.create({
  baseURL,
})

http.interceptors.request.use(function (config) {
//请求头设置token
  if (sessionStorage.token) {
    config.headers.authorization = sessionStorage.token
  }
  //将数据JSON化
  config.headers['Content-Type'] = "application/json"
  const token = sessionStorage.getItem('token')
  if (token) {
    let refreshToken = sessionStorage.getItem('refreshToken')
  }
  return config
}, function (error) {
  return Promise.reject(error);
});

// 设置全局捕获错误  拦截器
  http.interceptors.response.use(res => {
 		return res
}, err => {
  console.log(err, "error");
  return Promise.reject(err)
})
export default http

config文件下的index.js配置如下

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //配置跨域请求
    proxyTable: {
      '/api': {
        target: "http://192.168.22.26:8080/", //设置调用的接口域名和端口
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api"
        },
      }

    },

    // Various Dev Server settings
    //host: '127.0.0.1', // can be overwritten by process.env.HOST
    host: '0.0.0.0',
    disableHostCheck: true,
    port: 8084, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

dev.env.js配置如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

prod.env.js配置如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})