vue中配置axios教程-定稿版（一）——api index.js配置文件和.env文件

vue中配置axios教程-定稿版（一）——api/index.js配置文件和.env文件

第一步:在api/index.js中，

配置请求拦截、响应拦截、请求头和基准路径

完整代码-src/api/index.js

import axios from 'axios'

// 接口错误情况处理
const errorHandler = err => {
  console.log(err, 'err')

  return Promise.reject(err)
}

const service = axios.create({
  // process.env.NODE_ENV === 'development' 来判断是否开发环境
  // easy-mock服务挂了，暂时不使用了
  withCredentials: true, // cookie
  // baseURL: 'http://192.168.43.82:8090/',   
  baseURL: process.env.VUE_APP_BASE_API
  // timeout: 100000
})

service.interceptors.request.use(
  config => {
    if (sessionStorage.getItem('token')) {
      config.headers.token = sessionStorage.getItem('token')
    }
    if (config.data && config.data.post) {
      if (config.method === 'post') {
        config.data.post = null
        config.params = config.data
      }
    }
    return config
  },
  error => {
    console.log(error)
    // return Promise.reject()
  }
)

service.interceptors.response.use(response => {
  // application/octet-stream
  // 只将请求结果的data字段返回(JSON格式处理)
  let resData
  // if (response.data.status / 1 === 500 || response.data.status / 1 === 505) {
  //   sessionStorage.removeItem('token')
  //   if (window.location.pathname !== '/login') window.location.href = '/login'
  // }
  if (typeof response.data === 'string' && /{/.test(response.data)) {
    try {
      resData = JSON.parse(response.data)
    } catch (e) {
      resData = response.data
    }
  } else {
    resData = response.data
  }

  return resData
}, errorHandler)

export default service

1、基准路径配置的两种方式

方式一

baseURL: 'http://192.168.43.82:8090/',

方式二

1、在项目文件夹，src同层级新建.env文件

完整代码-.env

baseURL: process.env.VUE_APP_BASE_API

2、在src/api/index.js中

  // baseURL: 'http://192.168.43.82:8090/',   
  baseURL: process.env.VUE_APP_BASE_API

2、vue 中使用.env文件配置全局环境变量

.env 全局默认配置文件
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
使用在文件根目录下创建该文件。
其中，.env.development 与.env.production会覆盖.env 的全局属性。
.env.development 为npm run serve 即开发环境中加载。
.env.production 为npm run build 即生产环境中加载。

1、全局属性 自定义命名

VUE_APP_NAME = ''
VUE_APP_是规定的命名格式，NAME则是自定义的名称

2、获取全局属性

process.env.VUE_APP_NAME 获取环境变量 NAME是自定义的名称

3、例子

.env.development

ENV = development

# url
VUE_APP_URL = http://192.168.43.82:8090

.env.production

ENV = production

# burl
VUE_APP_URL = http://192.168.1.109:8000

4、调用

main.js中使用例子

//定义全局$baseUrl
// 使用 this.$baseUrl
Vue.prototype.$baseUrl = process.env.VUE_APP_URL;

vue.config.js 中使用例子

  devServer: {

    port: 8088,
    proxy: {
      //匹配代理的url
      '/api': {
        // 目标服务器地址
        target: process.env.VUE_APP_URL,
        ws: true,
        //路径重写
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      }
    }
  },