环境变量的使用及其拦截器的使用

一.在平常的开发环境中，分为两种环境，一种生产环境，一种开发环境，在平常在开发环境，

平常每次发送请求的使用都需要加上根地址非常麻烦，而且不容易维护，环境变量很好地解决了这一问题，

1.如何使用，在根目录配置进行配置

生成环境下的地址:

VUE_APP_BASE_API='666666666'

开发环境下的地址:

VUE_APP_BASE_API='7777777777777'

2.如何进行验证

  created() {
    alert(process.env.VUE_APP_BASE_API);
  },

解析:process.env.VUE_APP_BASE_API 固定写法，用来接收地址，在开发环境中的时候，npm  run serve， 运行的是66666666， 在生成环境下，进行打包，npm build，会出现空白区域的问题

解决代码:

创建vue.config.js  添加配置项

module.exports = {
  publicPath: "./", //  解决白屏问题
  devServer: {
    port: 7777, //  自定义端口号
    open: true, //  npm  run  serve  自动打开浏览器
  },
};

 打开生成的dist文件夹的网页 是777777777。

二.拦截器的使用

1. 导入axios

下载axios并且导入
import axios  from  axios

2.创建副本并且配置基地址

const _axios = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

解析:创建了一个axios副本,process.env.VUE_APP_BASE_API 用来接收环境变量的地址。

3.请求拦截

代码:

_axios.interceptors.request.use(
       (config)=>{
    return config
})

解析:在请求的时候进行一些处理。

4.响应拦截

_axios.interceptors.response.use(

 (res)=>{

return res})

对服务器响应回来数据的时候进行一些处理

5.将副本导出

export default _axios

6.在需要发送请求的接口导入,结合上面的环境变量，就达成了拦截功能和配置基地址的功能。

7.应用场景:在发送请求的时候判断有没有token,对错误进行一些处理......

8.图示: