Angular中Git提交排除API密钥：.gitignore与dotenv无效怎么办

一、先排查.gitignore不生效的核心原因 #

如果之前已经把environment.ts提交到Git仓库过，单纯加进.gitignore是没用的——Git会继续追踪已入库的文件。解决步骤：

1. 从Git追踪列表中移除该文件（不会删除本地文件）：

   git rm --cached src/environments/environment.ts
   

2. 提交这个变更：

   git commit -m "停止追踪environment.ts文件"
   

3. 确认.gitignore里的路径正确：如果environment.ts在src/environments/目录下，就要写src/environments/environment.ts，不能只写文件名。

二、用环境变量+模板文件的标准方案（适配TS/Angular项目） #

1. 在项目根目录创建environment.example.ts，作为模板文件（提交到Git）：

   export const environment = {
     production: false,
     apiKey: '' // 留空作为占位符
   };
   

2. 把environment.ts加入.gitignore，本地自己维护这个文件的内容（填写真实API密钥）。
3. 在movies.services.ts中正常引用environment.ts的变量：

   import { environment } from '../environments/environment';
   
   async addMovies() {
     const apiUrl = `https://your-api-domain.com/movies?api_key=${environment.apiKey}`;
     // 后续接口调用逻辑
   }
   

4. 如果坚持用dotenv，确保配置正确：
   • 安装依赖：npm install dotenv --save-dev
   • 根目录创建.env文件：API_KEY=你的真实密钥，并把.env加入.gitignore
   • 在environment.ts中读取变量：

     import * as dotenv from 'dotenv';
     dotenv.config();
     
     export const environment = {
       production: false,
       apiKey: process.env.API_KEY || ''
     };
     

三、验证配置是否生效 #

• 执行git status，检查environment.ts和.env是否出现在Untracked files区域（而非已追踪的变更列表）
• 可以执行git diff --cached查看即将提交的文件，确认没有包含敏感信息

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