如何读取环境变量？使用process.env.STRIPE_KEY遇未定义错误

不同项目场景的处理方案 #

1. Vite 项目 #

Vite 默认不自动加载根目录 .env 文件，有两种处理方式：

• 遵循 Vite 环境变量规则：将变量名改为 VITE_STRIPE_KEY，读取时使用 import.meta.env.VITE_STRIPE_KEY
• 保留原变量名：安装 dotenv 包后，在 vite.config.js 中配置：

import { defineConfig } from 'vite'
import dotenv from 'dotenv'
dotenv.config()

export default defineConfig({
  define: {
    'process.env.STRIPE_KEY': JSON.stringify(process.env.STRIPE_KEY)
  }
})

2. Create React App (CRA) 项目 #

CRA 要求环境变量以 REACT_APP_ 为前缀，修改 .env 文件内容：

REACT_APP_STRIPE_KEY=1234

读取时使用 process.env.REACT_APP_STRIPE_KEY

3. Node.js 原生项目（无前端脚手架） #

• 安装 dotenv 依赖：

npm install dotenv --save

• 在项目入口文件顶部加载配置：

// CommonJS 写法
require('dotenv').config()

// ES 模块写法
import dotenv from 'dotenv'
dotenv.config()

之后即可正常使用 process.env.STRIPE_KEY

4. Next.js 项目 #

• 客户端组件：变量需以 NEXT_PUBLIC_ 为前缀，如 NEXT_PUBLIC_STRIPE_KEY=1234，读取用 process.env.NEXT_PUBLIC_STRIPE_KEY
• 服务端组件/API 路由：可直接使用无前缀的 STRIPE_KEY

通用检查项 #

• 确认 .env 文件位于项目根目录（与 package.json 同级）
• 修改 .env 后必须重启 npm run dev 服务器，否则配置不生效
• 检查 .env 中变量名无多余空格，避免出现 STRIPE_KEY = 1234 这类格式错误

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