Angular 13中如何通过process.env使用DOTENV访问云环境密钥变量？

方案一：使用 Angular 官方环境文件（推荐） #

Angular 原生提供了环境变量管理方案，无需额外依赖，升级后兼容性最优。

1. 配置环境文件
   在项目src/environments目录下，默认已有environment.ts（开发环境）和environment.prod.ts（生产环境），直接在文件中定义变量：

// src/environments/environment.ts
export const environment = {
  production: false,
  API_BASE_URL: 'http://localhost:3000/api',
  APP_TITLE: '开发环境应用'
};

生产环境对应修改environment.prod.ts：

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  API_BASE_URL: 'https://api.yourdomain.com',
  APP_TITLE: '生产环境应用'
};

2. 在代码中引用
   在组件、服务中导入环境变量后直接使用：

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor() {
    console.log('当前API地址:', environment.API_BASE_URL);
    console.log('应用标题:', environment.APP_TITLE);
  }
}

3. 构建时切换环境

• 启动开发服务器：ng serve（自动加载environment.ts）
• 构建生产包：ng build --configuration production（自动加载environment.prod.ts）

方案二：适配新版 @angular-builders/custom-webpack #

如果需要保留process.env的使用方式，需针对Angular 13+的webpack 5适配配置：

1. 安装依赖
   安装最新版的custom-webpack和dotenv：

npm install @angular-builders/custom-webpack dotenv --save-dev

2. 创建自定义webpack配置
   在项目根目录新建webpack.config.js，通过dotenv加载环境变量并注入到process.env：

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  // 加载根目录下的.env文件
  const envConfig = dotenv.config();
  if (envConfig.error) {
    throw new Error('无法加载.env文件');
  }

  // 转换为webpack可识别的变量格式
  const envVariables = Object.keys(envConfig.parsed).reduce((acc, key) => {
    acc[`process.env.${key}`] = JSON.stringify(envConfig.parsed[key]);
    return acc;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envVariables)
    ]
  };
};

3. 修改angular.json配置
   找到项目的architect.build和architect.serve节点，替换builder为custom-webpack版本，并指定配置文件路径：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 保留原有outputPath、index、main等配置
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 保留原有browserTarget等配置
          }
        }
      }
    }
  }
}

4. 创建.env文件
   在项目根目录新建.env文件，添加环境变量：

API_BASE_URL=http://localhost:3000/api
APP_TITLE=开发环境应用

记得将.env加入.gitignore，避免提交敏感信息。

5. 在代码中使用process.env
   直接在代码中访问即可：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor() {
    console.log('当前API地址:', process.env.API_BASE_URL);
    console.log('应用标题:', process.env.APP_TITLE);
  }
}

注意事项 #

• Angular 13+基于webpack 5，custom-webpack配置必须使用函数式导出（module.exports = () => {}），不能用旧版对象式配置。
• 如需多环境.env文件（如.env.prod），可在webpack.config.js中根据process.env.NODE_ENV加载对应文件。

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