前端开发中环境变量配置

在一些特殊的配置文件中定义环境变量

文件名称	对应环境	说明
.env.development	开发环境	当运行npm run dev 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
.env.production	生产环境	当运行npm run build:prod 的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量
.env.staging	模拟生产环境	可以理解为production环境的镜像， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据)

在项目运行的过程中，通过不同的命令，能加载不同的配置文件，从而获取不同的环境变量。

定义环境变量-示例

//示例是在开发环境下

# just a flag
ENV = 'development'

# base api
//变量名=变量值
VUE_APP_BASE_API = '/dev-api'

//请注意，以 `VUE_APP_` 开头的变量将通过 `webpack.DefinePlugin` 静态地嵌入到*客户端侧*的代码中，建议以它开头来定义

VUE_APP_NUM = 2000

使用环境变量

//定义好环境变量之后，项目启动之后，它会自动被集成到process.env这个属性中。我们只需要通过下面的方式使用即可


process.env.环境变量名

注意：修改服务的配置文件，想要生效的话，必须要重新启动服务

 

总结：

1. 不同的环境（开发环境，生产环境，测试环境.......）可以设置不同的变量

   开发环境 - > development的文件 生产上线 -> production的文件

2. key = value 定义环境变量 process.env.环境变量名字

3. 自定义的环境变量要以：VUE_APP_开头

 

开发实例介绍

1.场景：

在项目开发的不同阶段，很可能要请求不同的基地址，例如：

在开发阶段，所有ajax请求要发到地址a；

在上线之后，所有ajax请求要发到地址b

2.配置

.env.devlopment

# 开发环境的基础地址
VUE_APP_BASE_API = 'http://ihrm-java.itheima.net/api'

.env.production

# 生产环境的基地址
VUE_APP_BASE_API = 'http://www.xxx.com/prod-api'

总结：设置环境变量，我们可以在不同的环境下使用不同axios基地址