前端JS文件获取.env环境变量 终端可打印但运行时检查报错如何解决

问题核心原因：终端打印的环境变量是存在于Node.js运行时的变量，仅在编译/服务端阶段可访问。前端代码最终运行在浏览器环境，默认无法直接读取Node.js侧的环境变量，未做专门的注入配置就会出现报错。

• 第一步：匹配构建工具的变量命名规则
  主流前端构建工具都做了环境变量注入的默认限制，只有符合命名前缀要求的变量才会被注入到前端代码中：
  • Vite项目：变量名必须加VITE_前缀，代码中通过import.meta.env.VITE_XXX读取
  • Create React App项目：变量名必须加REACT_APP_前缀，代码中通过process.env.REACT_APP_XXX读取
  • Vue CLI项目：变量名必须加VUE_APP_前缀，代码中通过process.env.VUE_APP_XXX读取
• 第二步：校验package.json启动/构建命令配置
  如果需要自定义变量或者跨平台兼容变量传递：
  1. Windows环境下先安装跨环境变量工具：npm install cross-env -D
  2. 修改package.json的scripts配置，示例如下：

     {
       "scripts": {
         "dev": "cross-env VITE_API_BASE=https://api.example.com vite",
         "build": "cross-env VITE_API_BASE=https://api.example.com vite build"
       }
     }
     

• 第三步：检查.env文件配置
  • 确认.env文件放在项目根目录，不要放在src或其他子目录下
  • 确认文件名拼写正确，默认加载的文件名为.env，如果是环境专属文件需要对应启动命令加--mode参数指定
• 第四步：自定义Webpack场景配置
  如果你没有使用上层框架封装的构建工具，用原生Webpack搭建项目，需要手动配置DefinePlugin注入变量：

  // webpack.config.js
  const webpack = require('webpack')
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.API_BASE': JSON.stringify(process.env.API_BASE)
      })
    ]
  }
  

• 额外注意：所有注入到前端代码的环境变量都会被打包到公开的静态资源中，所有人可直接查看，禁止将密钥、密码等敏感信息配置到可被前端读取的环境变量中。

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