这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战
今天咱们来聊聊在工作中常遇到的环境变量名词,给刚入职场的小伙伴们一些帮助,也希望有哪里不对的地方,掘友们给指出,谢谢!
一、基本环境说明
- 开发环境 development 就是本地打开的服务器,本地进行开发新功能,自己电脑运行.比如: http://192.168.11.103 或 http://localhost:8080/
- 测试环境 test 服务器端地址: www.test.juejin.cn 专门用于测试的服务器地址
- 生产环境 production 服务器端地址: www.juejin.cn 实际上线的地址
代码会先在本地开发, 然后上传到测试环境测试, 最后到生产环境上线 (俗称发生产)
二、环境变量动态设置 baseURL
一般用axios发请求,会进行二次封装,比如常见的request.js,设置一个基地址,其他用的时候,就配置相应的api。刚才说了, 有三个环境, 而三个环境的服务器基地址, 一般是不一样的! 我们每次如果换个环境运行代码,都去改 baseURL 就会很麻烦, 我们希望能够自动根据环境, 切换服务器基地址, 那就完美了。
大家知道process.env这个对象吗,里面存储的就是当前的环境。
所以可以有个笨点的方法,来设置const baseURL的值。
if(process.env.NODE_ENV === 'production') { const baseURL = xxx }
if(process.env.NODE_ENV === 'test') { const baseURL = xxx }
上面方法的升级版,新建不同环境下的配置文件
新建三个文件 `.env.development` `.env.test` `.env.production`
可以在文件中定义环境变量, 只会在对应的环境中加载, 规范: `VUE_APP_`开头
例如: `.env.development` ( 只有yarn serve 时会加载该文件 )
当然也需要在package.json中配置下打包命令
这样yarn test 就和yarn build一样效果,而且是走的.env.test的变量值了。
const http = axios.create({
baseURL: process.env.VUE_APP_URL, // 基准地址
})