vue中的axios的webpack配置代理以及二次封装

在项目根目录下 创建vue.config.js文件 注：此文件跟src是同级路径而不是包含关系

module.exports={
  // 部署应用时的基本url
  publicPath:"",
  // 打包构建应用的文件夹
  outputDir:"dist",
  // 打包时存放静态资源的文件夹，js/img/css
  assetsDir:"static",
  // 指定生成的index文件
  indexPath:"index.html",
  // 配置请求代理
  devServer:{
    proxy:{
      "/api":{
        target:"http://localhost:3000",
        ws:true,
        // 是否允许跨域
        changeOrigin:true
      }
    }
  }
}

注意：配置完之后一定一定要重启项目

axios二次封装（在src路径下的request文件夹下创建http.js）

import axios from "axios"

import Vue from "vue"

import qs from "qs"

// 开发环境

if(process.env.NODE_ENV === "development"){

  console.log("开发环境");

  Vue.prototype.$pre = "http://localhost:3000"

}

// 生产环境

if(process.env.NODE_ENV === "production"){

  console.log("生产环境");

  Vue.prototype.$pre = ""

}

// 请求拦截器

axios.interceptors.request.use(config=>{

  return config

})

// 响应拦截器

axios.interceptors.response.use(res=>{

  console.group("本次请求的路径是：" + res.config.url)

  console.log(res)

  console.groupEnd("拦截器结束")

  return res

})

 

/* 

  get请求

    url   请求地址

    params  请求参数

*/

export const get = (url,params={})=>{

  return new Promise((resolve,error)=>{

    axios.get(url,{

      params:params

    }).then(res=>{

      resolve(res)

    }).catch(err=>{

      error(err)

    })

  })

}

/* 

  post请求

    url   请求地址

    params  请求参数，如果有就传对象类型，如果没有就不传 

    isFile  是否有文件，如果有就传true，如果没有就不用传

*/

export const post = (url,params={},isFile=false)=>{

  let data = null

  if(isFile){

    // 有文件

    data = new FormData()

    for(let i in params){

      data.append(i,params[i])

    }

  }else{

    // 无文件

    data = qs.stringify(params)

  }

  return new Promise((resolve,error)=>{

    axios.post(url,data).then(res=>{

      resolve(res)

    }).catch(err=>{

      error(err)

    })

  })

}

 

使用

创建一个api.js文件（建议跟http.js文件同一个路径下）

import {get,post} from './http'

export const menuadd = (params)=> post('/api/menuadd',params)