vue,react 项目环境变量配置

59 阅读1分钟

在react或者vue的项目中经常会有很多的部署环境,比如测试环境,开发环境,预发环境,生产环境可能还有会有更多的自定义的环境,这个时候就需要根据不同的环境定义各自的环境变量

vue

vue官方文档

Vue CLI 有三个模式 test,development, production 如果这三个模式不满足开发需求可以在package.json中scripts通过添加--mode来覆写模式名称

image.png
然后添加对应的文件
image.png

注意:
在vue中变量名必须用 VUE_APP_开头才可以被识别

react

在react中可以使用webpack的第三方插件dotenv-webpack webpack地址
也是在package.json中定义一个参数,然后在plugin中引入对应的环境变量文件就可以在项目中使用process.env.XXX了,这个命名就没有限制了

image.png

image.png