无需.env文件，在CI/CD环境中使用Vite + React构建时直接读取系统环境变量的实现方案咨询

项目依赖列表 #

生产依赖 #

"dependencies": {
  "@fortawesome/fontawesome-free": "^6.4.2",
  "axios": "^1.6.2",
  "bulma": "^0.9.4",
  "react": "^18.2.0",
  "react-datepicker": "^4.21.0",
  "react-dom": "^18.2.0",
  "react-plotly.js": "^2.6.0"
}

开发依赖 #

"devDependencies": {
  "@types/react": "^18.2.15",
  "@types/react-dom": "^18.2.7",
  "@vitejs/plugin-react-swc": "^3.3.2",
  "eslint": "^8.45.0",
  "eslint-plugin-react": "^7.32.2",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.3",
  "postcss-nested": "^6.0.1",
  "vite": "^5.0.4",
  "vite-aliases": "^0.11.3",
  "vite-plugin-svgr": "^4.2.0"
}

我现在有个用Vite搭建的React项目，本地开发时靠.env文件（变量都以VITE_开头，代码里用import.meta.env.VITE_SOME_NAME读取）运行得很顺畅。

但到部署环节就卡壳了：我希望直接从系统环境变量里拿这些值，完全不想依赖.env文件。可试了直接跑npm run build却没用，查了下好像Vite从大概版本1开始就不再自动读取系统环境变量了，这属实有点麻烦。

目前我凑合用了个临时方案：先搞个“假的”.env.production，里面的变量值全是对应系统环境变量名的占位符；等在服务器上完成构建后，再跑个脚本——先从系统环境里捞到真实值，再去构建好的JS代码里把那些占位符替换成真实值。

我想请教各位大佬：有没有办法不用这种占位符绕弯子，直接让npm run build读取系统环境变量来构建？甚至能不能彻底丢掉.env.production文件（不管真假），让Vite直接去读系统环境里的值？

补充说明：我明确拒绝用写死真实值的.env.production文件，毕竟不想把敏感信息存在文件里，我们打算通过CI/CD变量或者Ansible脚本把变量传入系统环境。另外我也清楚Web应用本身没法读取系统环境，我要的是Docker容器拉取代码后，执行npm run build时能直接用系统环境变量；同时也明白JS里的内容没法真正隐藏。

备注：内容来源于stack exchange，提问作者Ricardo