vue开发环境变量详解（process.env）

为什么要配置环境变量

每个项目在开发和上线生产或者测试阶段的服务器地址等有可能是不一样的，所以需要根据环境给这些变量不一样的值。

方式一：添加一个配置文件 config.ts

根据process.env.NODE_ENV区分不同环境
开发环境: development
生成环境: production
测试环境: test

let BASE_URL = ''
const TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://123.207.32.32:8000/'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://myweb.org/prod'
} else {
  BASE_URL = 'http://myweb.org/test'
}

export { BASE_URL, TIME_OUT }

在其它需要用到这些变量的文件中直接引入使用就可以了

import { BASE_URL, TIME_OUT } from './gloup/config'

方式二：在当前项目的根目录创建三个文件.env.development、.env.production、.env.test

在相应的文件写入不同环境的变量

具体的变量书写规则可以参考 vue cli 中的环境变量要求
请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。
在其它文件读取环境变量的反式：

//比如我们声明了一个环境变量为 VUE_APP_SECRET，读取如下
process.env.VUE_APP_SECRET

环境变量基本都以大写字母+下划线 的形式书写（常量的书写规范）