uniapp获取不到自定义环境变量是怎么回事？

我在uniapp项目中配置了自定义环境变量，但在代码中通过process.env获取时始终是undefined。
已经在vue.config.js和.env文件中正确配置了变量，也重启了服务，但依然无法获取。
请问可能是什么原因导致的？需要检查哪些配置或步骤？

2 回复

在UniApp中获取不到自定义环境变量，常见原因和解决方法如下：

  1. 配置文件位置错误
    确保在项目根目录正确创建了 env.js 或 .env 文件，并在其中定义变量，例如：

    module.exports = {
  BASE_URL: 'https://api.example.com'
};

  2. 未正确引入配置文件
    在需要使用的页面中，通过 import 引入：

    import env from '@/env.js';
console.log(env.BASE_URL);

  3. HBuilderX 配置问题
    如果使用 HBuilderX，需在 manifest.json 的源码视图中配置环境变量，或在项目配置中声明。

  4. 运行平台差异
    部分平台（如小程序）可能限制动态加载，建议将环境变量直接写入代码或通过全局变量管理。

  5. 缓存问题
    尝试清除项目缓存，重新运行。

检查以上几点，通常能解决问题。


在 UniApp 中获取不到自定义环境变量，通常是由于配置或使用方式不正确导致的。以下是常见原因和解决方法：

1. 检查环境变量配置文件

UniApp 使用 env.xxx 文件（如 env.dev、env.prod）管理环境变量。确保：

  • 在项目根目录创建了正确的环境文件（例如 env.dev 用于开发环境）。
  • 文件内容为键值对格式，例如：
    API_BASE_URL=https://dev.api.com
APP_NAME=MyApp

2. 配置 package.json 中的环境模式

在 package.json 的 uni-app 字段中定义环境模式，例如：

{
  "uni-app": {
    "scripts": {
      "dev": "env dev",
      "prod": "env prod"
    }
  }
}

通过对应命令运行项目（如 npm run dev）以加载对应环境变量。

3. 正确获取环境变量

在代码中通过 process.env 访问变量，例如：

// 在 JS/TS 文件中
const apiUrl = process.env.API_BASE_URL;
console.log(apiUrl); // 输出对应环境的值

注意：

  • 仅支持在 非静态代码 中使用（如 Vue 的 data、方法或生命周期钩子中）。
  • 静态代码（如 Vue 模板或 CSS）无法直接使用 process.env。

4. 检查变量名称和拼写

  • 确保代码中引用的变量名与配置文件中的 完全一致（大小写敏感）。
  • 避免使用特殊字符或空格。

5. 重新启动开发服务器

修改环境配置文件后，重启开发服务器（如 HBuilderX 或终端中的 npm run 命令），否则变更可能未生效。

6. 验证环境加载

在 vue.config.js 中检查配置（如需要自定义处理）：

module.exports = {
  configureWebpack: (config) => {
    // 可选：手动注入环境变量
    config.plugins.push(
      new webpack.DefinePlugin({
        'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL),
      })
    );
  },
};

7. 排查构建工具差异

  • 使用 HBuilderX 时，确保在 运行菜单 中选择正确环境模式。
  • 使用 CLI 时，通过 --mode 参数指定环境，例如：
    npm run build:mp-weixin --mode prod

示例代码

  1. 创建 env.dev 文件：
    CUSTOM_VAR=HelloWorld
  2. 在 Vue 文件中使用：
    export default {
  data() {
    return {
      message: process.env.CUSTOM_VAR // 正确
    };
  },
  onLoad() {
    console.log(this.message); // 输出 "HelloWorld"
  }
};

总结步骤

  1. 确认环境文件存在且路径正确。
  2. 通过正确命令启动项目（如 npm run dev）。
  3. 在动态代码中通过 process.env.XXX 访问。
  4. 重启服务确保配置生效。

如果问题仍未解决，请检查开发工具控制台是否有错误日志，或确认项目结构是否符合 UniApp 规范。

回到顶部