前端环境变量

上周有个客人问我，前端环境变量这事儿到底是个啥？我跟他讲，环境变量啊，就像是电脑里的小助手，帮着存储一些敏感信息或者配置信息，这样我们就不需要在代码里直接写死，方便管理和修改。
比如说，你有个网站，需要连接数据库，数据库的地址、用户名、密码这些信息，你就可以设置成环境变量。这样，不管你的网站部署在哪里，只要环境变量设置对了，它就能找到对应的数据库。
我自己踩过的坑是，之前有个项目，开发环境和生产环境的环境变量没分开，结果在生产环境上跑的时候，直接把数据库密码暴露出来了，差点出了大问题。所以，环境变量一定要区分开发、测试、生产环境，各自设置好。
具体到前端，比如你用Vue或者React做项目，可能会用到一些环境变量来控制API的地址，或者是否开启某些功能。2023年我在上海某商场的一个项目里，就是用.env文件来管理这些变量的，方便又高效。
反正你看着办，设置环境变量的时候，记得要区分环境，别像我当时那样马虎了事。我还在想这个问题，怎么让环境变量管理得更安全、更规范。

上周有个客人问我前端环境变量那点事，我当时就有点蒙。我自己踩过的坑是，这玩意儿在开发前端的时候还挺关键的，但有时候设置起来还挺头疼的。
你想想，2023年我在北京一家互联网公司做前端开发，那时候我们用的环境变量主要是用来区分开发、测试和生产环境的。比如，数据库的连接信息啦，API密钥啦，这些敏感信息不能直接写在前端代码里，对吧？
但问题来了，怎么设置这些环境变量呢？记得当时我们用了一个叫做.env的文件，里面可以定义各种环境变量。然后在package.json的脚本里，我们可以通过process.env来访问这些变量。
json { "scripts": { "start": "node index.js", "build": "env-cmd -e dev npm run build" } }
这里，-e dev就是告诉env-cmd使用dev环境的环境变量。但这样设置起来有点繁琐，有时候还容易出错。
不过，后来我们换了个工具叫dotenv，它可以直接从.env文件中加载环境变量到process.env中，用起来方便多了。就像这样：
javascript require('dotenv').config(); console.log(process.env.DB_HOST); // 输出数据库的主机地址
反正，环境变量这事儿，关键是要保证安全性，同时方便使用。你看着办吧，我还在想这个怎么设置才最合理呢。

聊起前端环境变量，我这老江湖可有不少故事。记得2015年那会儿，我在一家互联网公司做前端开发，那时候项目复杂，环境变量搞不定简直让人头大。
那时候，我们项目里用了好几个环境：开发、测试、预发布、生产。每个环境都要配置不同的变量，比如API地址、数据库连接等。那时候，我们都是手动在项目的.env文件里写，或者通过CI/CD工具来配置。
有一次，一个新来的同事配置环境变量的时候出了问题，他用的API地址是测试环境的，结果代码部署到生产环境了。那天晚上，我接到紧急电话，赶过去一看，那可真是惊心动魄。几百个用户的信息泄露风险，吓得我赶紧联系运维同事，手动回滚了代码。
后来，我就开始研究环境变量的管理，用了dotenv库，还搞了个脚本来自动化配置。从那以后，再也没出现过类似的乌龙事件。
说起来，现在的前端环境变量管理工具可真是多，比如Vercel、Netlify这些平台，都提供了环境变量管理的功能。不过，这块我也没碰过，不敢乱讲，毕竟技术更新太快了。不过，环境变量管理这事儿，关键还是得做好配置管理，避免人为错误。