MEAN栈网站如何定义可同时被前后端引用的变量？

嘿，这个问题我在MEAN栈项目里踩过坑，确实有几种实用的办法能实现前后端共用环境变量，我给你捋捋靠谱的方案：

前端是浏览器环境，没法直接读取服务器端的.env文件，所以得借助构建工具把变量打包进前端代码里。

如果你用的是Angular CLI：

• 可以在src/environments目录下的environment.ts（开发环境）和environment.prod.ts（生产环境）里定义共用变量，然后借助dotenv从根目录的.env读取值：

  // src/environments/environment.ts
  import * as dotenv from 'dotenv';
  dotenv.config({ path: '../../.env' });
  
  export const environment = {
    production: false,
    appName: process.env.APP_NAME,
    apiBaseUrl: process.env.API_BASE_URL
  };
  

  之后在Angular组件里直接导入environment就能用这些变量了。

如果是用Webpack自定义构建：

• 先安装dotenv依赖：npm install dotenv --save-dev
• 在Webpack配置文件里用DefinePlugin把环境变量注入为全局常量：

  // webpack.config.js
  const dotenv = require('dotenv');
  const webpack = require('webpack');
  
  // 加载根目录的.env文件
  dotenv.config();
  
  module.exports = {
    // 其他Webpack配置...
    plugins: [
      new webpack.DefinePlugin({
        // 注意要用JSON.stringify处理，避免语法问题
        'process.env.APP_NAME': JSON.stringify(process.env.APP_NAME),
        'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL)
      })
    ]
  };
  

  这样前端代码里就能直接用process.env.APP_NAME这类变量了，构建时Webpack会把它们替换成实际的环境值。

如果有些变量需要在运行时动态获取（比如部署后才确定的配置），可以让后端写一个专门的接口，把非敏感的共用变量返回给前端。

举个Express后端的例子：

// 后端路由文件
app.get('/api/public-env', (req, res) => {
  // ！！重要提醒：绝对不能把SENDGRID_API_KEY、数据库密码这类敏感变量返给前端！！
  res.json({
    appName: process.env.APP_NAME,
    apiBaseUrl: process.env.API_BASE_URL,
    maxUploadSize: process.env.MAX_UPLOAD_SIZE
  });
});

然后前端在应用启动时请求这个接口，把变量存在全局服务或者状态管理里（比如Angular的Service、NgRx）：

// Angular的环境变量服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class PublicEnvService {
  public envVars: any;

  constructor(private http: HttpClient) {}

  // 加载环境变量，建议在应用初始化时调用
  loadEnvVars() {
    return this.http.get('/api/public-env').toPromise()
      .then(data => {
        this.envVars = data;
      });
  }
}

可以配合Angular的APP_INITIALIZER，确保应用启动前就加载好这些变量。

• 敏感变量绝对不能给前端：像SENDGRID_API_KEY这种密钥只能留在后端，前端是完全公开的环境，泄露会导致安全问题。
• 选择方案要看场景：静态配置用构建注入更高效，动态配置用后端接口更灵活。

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