# 环境变量
在开发中经常会有一些需求，根据不同的环境进行不同的操作，比如 url 的替换，dev 环境在 dev 的 url，而线上使用 prod 的环境，Pro项目遵循[VueCli的环境配置](https://cli.vuejs.org/zh/guide/mode-and-env.html)。  
在Pro项目中，我们默认配置了以下环境变量，根据项目需求，您可以增加或减少环境配置
```bash
.env.local          # 本地开发环境
.env.ci1            # 网格开发环境1
.env.ci2            # 网格开发环境2
.env.ci3            # 网格开发环境3
.env.ci4            # 网格开发环境4
.env.st1            # 网格测试环境1
.env.st2            # 网格测试环境2
.env.st3            # 网格测试环境3
.env.st4            # 网格测试环境4
.env.pre            # 网格预发环境
.env.prod           # 网格生产环境
```
他们的格式是这样的：
```
NODE_ENV = development
VUE_APP_ENV = local
```
所有的环境变量都可以在构建模式下获取到，但只有以"VUE_APP_"开头的环境变量能在浏览器环境获取到，VUE_APP_ENV对应的可取值如下：  
 * 'local' - 本地环境  
 * 'ci1'   - 开发环境  
 * 'st1'  - 测试环境  
 * 'prod'  - 生产环境  
在pro项目中，环境变量已经在/src/config/env.js中做暴露：
```javascript
const env = process.env.VUE_APP_ENV
export default env
```
这样，你就可以在代码中快乐地import了，比如在App.vue中，你可以这样写
```javascript
import env from './config/env.js'
export default {
  mounted () {
    console.log(`当前环境为${env}`)
    if (env === 'local') {
      // 这里的代码仅在dev环境下生效
    } else if (env === 'st1') {
      // 这里的代码仅在st1环境下生效
    } else {
      // ......
    }
  }
}
```
## 通过环境变量控制访问不同的Url
集中管理所有环境的接口地址，一个典型的使用环境变量的例子，通过环境变量访问不同的接口url,如下：
```javascript
import env from './env'

const baseUrl = {
	local: { // 测试环境
		api: '//st1.2345.cn',
	},
	st1: { // 开发环境
		api: '//st1.2345.cn',
	},
    prod: { // 生产环境
		api: '//2345.cn',
	}
}

export default baseUrl[env]
```