构建阶段加载环境变量的最佳方案？BitBucket pipeline配置疑问

不需要逐个手动编写export语句，可根据你的变量数量、敏感程度选择以下两种方案：

方案1：直接使用BitBucket原生变量注入（推荐变量少的场景） #

• 进入对应仓库的「Repository settings」→「Repository variables」页面，直接添加你需要的环境变量键值对即可；如果不同部署环境（测试/生产）的变量值不同，可以切换到「Deployments」栏目下对应环境的变量配置页单独配置。
• 敏感类变量（如密钥、访问令牌）配置时记得勾选「Secured」选项，配置后变量值会被加密存储，pipeline运行日志里也会自动脱敏为***，不会泄露。
• 配置完成后BitBucket会在pipeline运行时自动将这些变量注入到构建环境的全局作用域，webpack构建过程中process.env.API_URL可以直接读取到对应值，不需要手动添加export API_URL=$API_URL这类冗余语句。

方案2：生成.env文件适配本地dotenv逻辑（推荐变量多的场景） #

如果你项目里环境变量数量多，想完全对齐本地dotenv-webpack的加载逻辑，可以用这个方案：

• 将完整的.env文件内容整体作为一个加密变量存储到BitBucket，变量名可设为DOTENV_CONTENT，记得勾选「Secured」选项。
• 在pipeline对应step的脚本开头添加一行命令：echo "$DOTENV_CONTENT" > .env，执行后会在构建目录生成和本地一致的.env文件，dotenv-webpack会自动读取文件内的所有变量，不需要额外调整webpack配置。

注意事项 #

• 不要将.env文件提交到代码仓库，所有敏感配置必须通过BitBucket的加密变量存储，避免密钥泄露。
• 如果你的webpack配置中对process.env变量的注入有前缀限制（比如仅识别VUE_APP_/REACT_APP_开头的变量），需要保证BitBucket中配置的变量名符合对应前缀规则。

内容的提问来源于stack exchange，提问作者Bart Bergmans