uniapp import.meta.env 获取不到环境变量如何解决？

在uniapp中使用import.meta.env获取环境变量时，发现无法正确获取到配置的值。按照官方文档配置了.env文件，但在代码中通过import.meta.env.VUE_APP_XXX访问时返回undefined。已尝试过以下方法：

  1. 确保.env文件放在项目根目录
  2. 变量名以VUE_APP_开头
  3. 重启了开发服务器
    环境：HBuilderX 3.6.18 + vite构建模式
    请问这种情况下该如何正确获取环境变量？是否需要额外配置vite.config.js？
2 回复

检查uni-app版本，确保是v3+。在项目根目录创建.env文件，使用VITE_前缀定义变量。如：VITE_API_URL=xxx。代码中通过import.meta.env.VITE_API_URL获取。


在 UniApp 中，import.meta.env 是 Vite 构建工具特有的环境变量访问方式，但 UniApp 默认使用 Webpack 构建，因此无法直接使用。以下是解决方案：

1. 使用 UniApp 内置环境变量

UniApp 通过 process.env.NODE_ENV 区分开发与生产环境：

if (process.env.NODE_ENV === 'development') {
  console.log('开发环境');
} else {
  console.log('生产环境');
}

2. 配置环境变量文件

  • 在项目根目录创建 .env.development 和 .env.production 文件。
  • 写入变量（需以 VITE_ 开头，仅 Vite 生效）：
    VITE_API_BASE=http://dev.example.com
  • 在代码中通过 process.env.VITE_API_BASE 访问（需配合 Vite 插件）。

3. 使用条件编译

在 vue.config.js 中配置 DefinePlugin 注入全局变量：

const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.API_BASE': JSON.stringify(process.env.NODE_ENV === 'development' 
          ? 'http://dev.example.com' 
          : 'https://prod.example.com')
      })
    ]
  }
};

代码中直接使用 process.env.API_BASE 即可。

4. 手动管理配置

创建 config.js 文件管理不同环境：

const config = {
  development: {
    baseURL: 'http://dev.example.com'
  },
  production: {
    baseURL: 'https://prod.example.com'
  }
};
export default config[process.env.NODE_ENV];

注意事项：

  • 若使用 HBuilderX，需在「运行」菜单配置环境参数。
  • 环境变量需在构建时注入，运行时动态修改无效。

选择适合项目构建工具（Webpack/Vite）的方案即可解决。

回到顶部