vue环境配置文件详解

一.什么是配置文件

1.在vue项目目录下，我们可以看到诸如package.json、.gitignore、package-lock.json等等能配置项目的结构、引用的库、运行的方式、版本控制等等的都称为配置文件。

2.环境配置文件就是能根据项目运行的环境而配置相应变量的文件，这里要提的就是  .env.development （开发环境下的配置文件）和  .env.production（生产环境下的配置文件）。

 .env.development -------运行在本地的配置文件

 .env.production----------运行在服务器的配置文件

 二.环境配置文件的作用

1.主要用于配置请求的地址前缀

三.环境配置文件的配置方法

1.环境配置文件的注释只能以 “#” 开头，属性必须以VUE_APP_开头

# 测试环境地址
VUE_APP_DEV_SERVER = 192.168.XX.XX

# 正式环境地址
VUE_APP_PRO_SERVER = 180.22.XX.XX

注：以上只是写法，测试环境和正式环境的地址不能写在同一文件中，因为会根据环境获取相应文件的数据

四.如何获取环境配置文件的数据

1.vue会根据环境自动加载对应的环境文件，我们只需要调取即可

const service = axios.create({
  baseURL: process.env.VUE_APP_DEV_SERVER,   //192.168.XX.XX
  timeout: 5000 // request timeout
})