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
})

 五.注意事项

1.当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入

2.只有以 VUE_APP_ 开头的变量会被webpack.DefinePlugin静态嵌入到客户端侧的包中，能够被访问到。

3.你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // config
}

4.如果你的项目在启动中时创建了环境变量，请重启服务后再访问环境变量