TypeScript React项目中如何正确读取.env文件环境变量

你遇到的变量值为undefined和引入dotenv报错的问题，是对脚手架规则认知偏差导致的，按以下步骤修复即可：

• 首先移除手动引入的dotenv相关逻辑：dotenv是Node.js服务端专用的包，依赖Node底层的文件系统API读取本地文件，浏览器环境不存在对应能力，这就是你引入后直接抛错的原因。无论是JS还是TS版本的Create React App脚手架，内置已经完成了.env文件的读取、变量注入逻辑，完全不需要额外安装dotenv依赖，也不需要手动调用config()方法。
• 变量读取为undefined的核心原因：Create React App 有强制的安全规则，所有需要暴露给前端客户端代码的环境变量，必须以REACT_APP_作为前缀，没有此前缀的变量会被脚手架主动过滤，不会注入到前端可访问的process.env对象中。

具体操作步骤 #

1. 卸载多余的dotenv依赖，删除index.tsx中编写的require('dotenv').config()及相关调试代码。
2. 确认.env文件放置在项目根目录（和package.json同层级，不要放在src目录内），修改变量名添加规定前缀：

   REACT_APP_API_KEY={myapikey}
   REACT_APP_API_BASE={api_base}
   

3. 对应修改代码中的变量读取逻辑，匹配新的变量名：

   const API_BASE = process.env.REACT_APP_API_BASE;
   const TMDB_API_KEY = process.env.REACT_APP_API_KEY;
   
   export const fetchPopular = createAsyncThunk('popular/fetchPopular', async () => {
     const response = await axios.get<MovieResults>(`${API_BASE}movie/popular?api_key=${TMDB_API_KEY}`);
     console.log(response.data);
     return response.data.results;
   })
   

4. 补充TypeScript类型声明：在src目录下找到或新建react-app-env.d.ts文件，添加自定义环境变量的类型定义，避免TS报类型错误：

   /// <reference types="react-scripts" />
   
   declare namespace NodeJS {
     interface ProcessEnv {
       REACT_APP_API_KEY: string;
       REACT_APP_API_BASE: string;
     }
   }
   

5. 重启开发服务器：脚手架仅在服务启动时读取一次.env文件，修改.env后热更新不会加载新的变量值，必须停掉服务重新运行启动命令，变量即可正常读取。

补充提示：如果你使用的是Vite搭建的React+TS项目，规则逻辑类似，只是要求环境变量前缀为VITE_，读取时通过import.meta.env访问即可，同样不需要手动引入dotenv。

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