文件名称 | 对应环境 | 说明 |
.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.环境变量名
注意:修改服务的配置文件,想要生效的话,必须要重新启动服务
总结:
-
不同的环境(开发环境,生产环境,测试环境.......)可以设置不同的变量
开发环境 - > development的文件 生产上线 -> production的文件
-
key = value 定义环境变量 process.env.环境变量名字
-
自定义的环境变量要以:VUE_APP_开头
开发实例介绍
1.场景:
在项目开发的不同阶段,很可能要请求不同的基地址,例如:
在开发阶段,所有ajax请求要发到地址a;
在上线之后,所有ajax请求要发到地址b
2.配置
.env.devlopment
# 开发环境的基础地址
VUE_APP_BASE_API = 'http://ihrm-java.itheima/api'
.env.production
# 生产环境的基地址
VUE_APP_BASE_API = 'http://www.xxx/prod-api'
总结:设置环境变量,我们可以在不同的环境下使用不同axios基地址
更多推荐
前端开发中环境变量配置
发布评论