前端小白不迷路,今天聊聊工作中遇到的环境变量

340 阅读2分钟

这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战

今天咱们来聊聊在工作中常遇到的环境变量名词,给刚入职场的小伙伴们一些帮助,也希望有哪里不对的地方,掘友们给指出,谢谢!

一、基本环境说明

代码会先在本地开发, 然后上传到测试环境测试, 最后到生产环境上线 (俗称发生产)

二、环境变量动态设置 baseURL

一般用axios发请求,会进行二次封装,比如常见的request.js,设置一个基地址,其他用的时候,就配置相应的api。刚才说了, 有三个环境, 而三个环境的服务器基地址, 一般是不一样的! 我们每次如果换个环境运行代码,都去改 baseURL 就会很麻烦, 我们希望能够自动根据环境, 切换服务器基地址, 那就完美了。

大家知道process.env这个对象吗,里面存储的就是当前的环境。

222.png

所以可以有个笨点的方法,来设置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中配置下打包命令

333.png 这样yarn test 就和yarn build一样效果,而且是走的.env.test的变量值了。

const http = axios.create({
  baseURL: process.env.VUE_APP_URL, // 基准地址
})

总结:执行打包命令的时候,webpack会根据
命令,从而选择环境变量,进而打包出来的是什
么环境下的产品。