当前位置：首页 > news >正文

【JS】import.meta.env，process.env，window三种环境变量获取方式的区别

news 2025/9/10 14:55:48

三种环境变量获取方式的区别：

import.meta.env：

这是 Vite 提供的一种访问环境变量的方式
在 Vite 项目中，环境变量会以 VITE_ 开头
例如：import.meta.env.VITE_APP_TITLE
在开发环境中，这些变量会被自动注入
在 uni-app中，HBuilderX 也会注入一些以 UNI_ 开头的变量

process.env：

这是 Node.js 环境中访问环境变量的标准方式
在 Node.js 环境中，所有环境变量都可以通过 process.env 访问
例如：process.env.NODE_ENV
在浏览器环境中，process.env 可能不存在或为空对象
在 uni-app 中，HBuilderX 会将一些环境变量注入到 process.env 中

window 对象：

这是浏览器环境中的全局对象。可以通过 window 对象访问全局变量和函数，例如：window.__UNI_ENV__
在 uni-app 中，HBuilderX 会将一些环境变量注入到 window 对象中。这种方式只在浏览器环境中有效在您的代码中，我们尝试从这三种不同的来源获取环境变量，以确保在不同的运行环境中都能正确获取到环境变量。这是因为：
- 在开发环境中，import.meta.env 可能包含环境变量
- 在 Node.js 环境中，process.env 可能包含环境变量
- 在浏览器环境中，window 对象可能包含环境变量

通过尝试这三种不同的来源，我们可以确保在不同的运行环境中都能正确获取到环境变量。

在 uni-app 中，HBuilderX 会根据您在 package.json 中配置的环境变量，将这些变量注入到不同的对象中。例如：

{"uni-app": {"scripts": {"dev": {"title": "H5 测试环境","env": {"UNI_PLATFORM": "h5","UNI_VITE_API_BASE": "http://apitest.**测试服**.com/","UNI_NODE_ENV": "development"}},"prod": {"title": "H5 生产环境","env": {"UNI_PLATFORM": "h5","UNI_VITE_API_BASE": "https://api.***正式服**.com/","UNI_NODE_ENV": "production"}}}}
}

当您在 HBuilderX 中选择不同的运行环境时：

选择"H5 测试环境"时：

import.meta.env.UNI_NODE_ENV 将被设置为 "development"
import.meta.env.UNI_VITE_API_BASE将被设置为 http://apitest.******.com/
process.env.UNI_NODE_ENV 也会被设置为相同的值
window.UNI_ENV 可能会被设置为 "development"

选择"H5 生产环境"时：

import.meta.env.UNI_NODE_ENV 将被设置为 "production"
import.meta.env.UNI_VITE_API_BASE 将被设置为 -"https://api.pawalive.com/"
process.env.UNI_NODE_ENV 也会被设置为相同的值
window.UNI_ENV 可能会被设置为 "production"

这就是为什么在我们的 config/env.js 文件中，我们尝试从这三个不同的来源获取环境变量，以确保在任何情况下都能获取到正确的环境配置。
您可以通过在代码中添加以下调试语句来查看这些变量的实际值：

console.log('环境变量来源:', {importMetaEnv: {NODE_ENV: import.meta.env.UNI_NODE_ENV,API_BASE: import.meta.env.UNI_VITE_API_BASE},processEnv: {NODE_ENV: process.env.UNI_NODE_ENV,API_BASE: process.env.UNI_VITE_API_BASE},windowEnv: {ENV: window.__UNI_ENV__,API_URL: window.__UNI_API_URL__}
});