如何将后端dotenv管理的环境变量传递至前端？

这个问题我太熟了——把后端.env里的非敏感变量传递到前端，同时避免硬编码或重复配置，是前端开发里的高频需求。根据你的技术栈不同，有几种靠谱的方案可以选：

1. 后端模板引擎注入（适合服务端渲染/传统后端项目） #

如果你的项目用Express、Django这类后端框架，搭配模板引擎（比如EJS、Jinja2、Pug），可以直接在HTML模板里把变量注入到全局window对象中：

示例（Express + EJS） #

• 后端路由里把变量传给模板：

// 后端代码
require('dotenv').config();
app.get('/', (req, res) => {
  res.render('index', { apiUrl: process.env.API_URL });
});

• 在EJS模板的<head>里添加脚本：

<!-- index.ejs -->
<script>
  // 把后端传递的变量挂载到全局window
  window.API_URL = '<%= apiUrl %>';
</script>

之后前端JS代码直接访问window.API_URL即可。注意：只传递非敏感变量，比如API基础地址，绝对不能传密码、密钥这类敏感信息！

2. 构建时注入（适合Vue/React/Vite/Webpack等前端构建项目） #

现代前端构建工具都支持在构建阶段将环境变量注入到代码中，核心是通过特定前缀或配置让构建工具识别并替换变量：

示例1：Vite/Vue CLI #

• 在后端的.env里添加带特定前缀的变量（Vite用VITE_，Vue CLI用VUE_APP_）：

# .env文件
VITE_API_URL=https://your-api-domain.com

• 前端代码中直接访问：

// 前端代码
console.log(import.meta.env.VITE_API_URL); // Vite
// 或 Vue CLI：console.log(process.env.VUE_APP_API_URL);

构建工具会在打包时把变量替换成实际值，最终代码里看不到原始的变量名。

示例2：Webpack #

• 用webpack.DefinePlugin手动配置，或用dotenv-webpack插件加载.env文件：

// webpack.config.js
const webpack = require('webpack');
const dotenv = require('dotenv').config();

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL)
    })
  ]
};

• 前端代码直接用process.env.API_URL即可，Webpack会在打包时替换为实际值。

3. 后端接口动态获取（适合需要动态更新变量的场景） #

如果你的环境变量需要在运行时动态调整（比如后端修改.env后不想重新打包前端），可以写一个专门的后端接口返回允许前端访问的变量：

示例 #

• 后端接口：

// 后端代码
require('dotenv').config();
app.get('/api/public-env', (req, res) => {
  // 只返回非敏感的公开变量
  res.json({
    apiUrl: process.env.API_URL,
    appEnv: process.env.NODE_ENV
  });
});

• 前端初始化时调用接口：

// 前端代码
async function loadEnv() {
  const response = await fetch('/api/public-env');
  const env = await response.json();
  // 把变量存在全局或状态管理工具中
  window.APP_ENV = env;
}

// 在应用启动前调用
loadEnv().then(() => {
  // 初始化应用
});

这种方式的好处是变量更新后前端只需刷新页面即可，无需重新打包。

4. 静态文件生成脚本（纯静态站点） #

如果是没有后端服务的纯静态站点，可以写一个Node脚本，在构建前读取.env并生成一个包含变量的JS文件：

示例 #

• 编写generate-env.js脚本：

const dotenv = require('dotenv').config();
const fs = require('fs');

const envContent = `window.env = {
  API_URL: "${process.env.API_URL}"
};`;

fs.writeFileSync('./public/env.js', envContent);

• 在package.json的构建命令前添加这个脚本：

{
  "scripts": {
    "prebuild": "node generate-env.js",
    "build": "your-build-command"
  }
}

• 在HTML中引入生成的env.js：

<script src="/env.js"></script>

前端就能通过window.env.API_URL访问变量了。

重要注意事项 #

• 绝对不要传递敏感变量：前端代码完全暴露给用户，数据库密码、API密钥等敏感信息永远不能出现在前端，哪怕是通过上述方式传递也不行。
• 根据场景选方案：构建时注入适合静态部署的SPA，模板注入适合服务端渲染项目，接口获取适合动态更新需求。

内容的提问来源于stack exchange，提问作者Madeline Ries