uniapp .env 读取不到是什么原因

“在uni-app项目中配置了.env文件，但运行时无法读取到里面的环境变量，请问可能是什么原因导致的？已经确认文件路径和变量命名没有问题，但在代码中通过process.env访问时返回undefined。是否需要额外配置才能生效？”

2 回复

可能原因：

  1. 未在根目录创建.env文件
  2. 变量名未以VUE_APP_开头
  3. 未重启项目（修改.env后需重启）
  4. 文件编码格式错误
  5. 使用了错误的读取方式

检查文件位置和变量命名，重启项目即可。


在 UniApp 中无法读取 .env 文件通常由以下原因导致，请逐一排查：

  1. 文件路径和命名错误

    • 确保 .env 文件位于项目根目录（与 package.json 同级）。
    • 文件名必须为 .env（生产环境）或 .env.development（开发环境），注意以点开头。

  2. 环境变量未正确配置

    • 在 .env 文件中，变量需以 VUE_APP_ 开头（例如 VUE_APP_API_URL=https://api.example.com）。
    • 其他前缀的变量在 UniApp 中默认无法被识别。

  3. 未安装或配置 dotenv

    • UniApp 基于 Vue.js，需通过 dotenv 解析环境变量。检查是否已安装：
      npm install dotenv --save
    • 在 vue.config.js 中配置（如存在）：
      const dotenv = require('dotenv');
dotenv.config(); // 加载 .env 文件

  4. 重启开发服务器

    • 修改 .env 后，必须重启服务（如 npm run dev）才能生效。

  5. 代码中读取方式错误

    • 通过 process.env.VUE_APP_xxx 访问，例如：
      // 在 js/ts 文件中
const apiUrl = process.env.VUE_APP_API_URL;
console.log(apiUrl);

  6. 平台兼容性问题

    • 部分平台（如小程序）可能限制环境变量使用，需通过构建命令注入变量：
      // package.json
"scripts": {
  "build:mp-weixin": "VUE_APP_ENV=production uni-build"
}

解决方案步骤：

  1. 确认文件位置与命名正确。
  2. 检查变量命名是否符合 VUE_APP_ 规范。
  3. 重启开发服务器。
  4. 通过 console.log(process.env) 调试输出，确认变量是否加载。

若问题持续，检查项目依赖或构建工具配置是否覆盖了环境变量设置。

回到顶部