React项目普通JS文件使用环境变量遇process未定义问题求助

问题根源 #

浏览器环境本身不存在Node.js的process对象，直接在前端script.js里调用process.env必然报错。不同项目的构建工具/脚手架有各自的环境变量注入规则，你之前尝试的包没起作用，大概率是没匹配项目类型的正确处理方式。

分场景解决方案 #

1. 如果你用Create React App（CRA） #

• 环境变量必须加REACT_APP_前缀，比如.env里写：

  REACT_APP_SPOTIFY_CLIENT_ID=你的clientId
  

• 代码里直接用process.env.REACT_APP_SPOTIFY_CLIENT_ID访问
• CRA内置了环境变量处理，无需额外安装dotenv，改完重启开发服务器就行

2. 如果你用Vite #

• 环境变量必须加VITE_前缀，比如.env里写：

  VITE_SPOTIFY_CLIENT_ID=你的clientId
  

• 代码里用import.meta.env.VITE_SPOTIFY_CLIENT_ID访问
• Vite自带处理逻辑，不用额外装包，重启服务生效

3. 纯静态HTML/JS项目（无脚手架） #

纯静态项目需要用打包工具把环境变量注入代码，推荐用Vite快速处理：

• 初始化项目：npm init -y
• 安装依赖：npm install vite --save-dev
• .env里写带VITE_前缀的变量（同上）
• 修改package.json的scripts：

  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
  

• 代码里用import.meta.env.VITE_SPOTIFY_CLIENT_ID访问
• 运行npm run dev启动开发服务，打包用npm run build

重要提醒 #

Spotify的clientId可以公开，OAuth授权流程中它本来就要传给Spotify服务器；真正需要保密的是clientSecret，绝对不能放在前端环境变量里，必须放在后端服务中。

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