Vue.js 中 window.ENV 与 process.env 与 window._env 在 Vue.js 应用中的使用有何区别

在本文中，我们将介绍 Vue.js 中的 window.ENV、process.env 和 window._env，在 Vue.js 应用中使用它们的区别以及它们的作用。

阅读更多：Vue.js 教程

window.ENV

window.ENV 是一个全局变量，用于在 Vue.js 应用中存储环境变量。它通常在应用的入口文件（如 main.js）中定义，并且在整个应用中可用。window.ENV 可以存储任意类型的值，包括字符串、数字、布尔值等。

在 Vue.js 应用中，可以使用以下方式获取 window.ENV 的值：

const envValue = window.ENV;

然后可以根据获取到的值在应用中进行相应的处理。

process.env

process.env 是 Node.js 的全局变量，用于在服务端和构建工具中存储环境变量。在 Vue.js 应用中，process.env 通常是在构建应用时被定义，而不是在运行时定义。

process.env 中存储的环境变量在构建时会根据当前环境（开发、生产等）的配置文件中的设置进行填充。在构建时，可以使用不同的配置文件（如 .env.development、.env.production）来存储特定环境的变量。

在 Vue.js 应用中，可以使用以下方式获取 process.env 的值：

const envValue = process.env.VUE_APP_ENV_NAME;

其中，VUE_APP_ENV_NAME 是在.env 配置文件中定义的环境变量名。

需要注意的是，process.env 无法在运行时动态修改，因为它在构建时已经被赋值。如果需要在运行时根据不同条件改变环境变量的值，可以使用 window.ENV 或其他方式进行。

window._env

window._env 是一种将环境变量传递给前端应用的替代方式。它可以在运行时根据不同的环境动态加载不同的环境变量。

window._env 通常在应用的模板（如 index.html）中定义，并且在整个应用中可用。它通常用于在构建时无法获取环境变量的情况，或者需要在其他地方使用环境变量时进行传递。

在 Vue.js 应用中，可以使用以下方式获取 window._env 的值：

const envValue = window._env.VUE_APP_ENV_NAME;

其中，VUE_APP_ENV_NAME 是在配置文件中定义的环境变量名。

需要注意的是，如果使用 window._env，需要确保在应用的模板中通过构建脚本将环境变量动态注入到 window._env 中。

示例说明

假设我们有一个 Vue.js 应用，需要根据开发环境和生产环境的不同，使用不同的 API 地址配置。

我们可以在应用的入口文件 main.js 中使用 window.ENV 存储 API 地址：

window.ENV = {
  API_URL: process.env.NODE_ENV === 'production' ? 'https://api.example.com' : 'https://dev-api.example.com'
};

然后，在应用的其他地方使用配置的 API 地址：

const apiUrl = window.ENV.API_URL;

这样，在不同环境下，应用都会使用对应的 API 地址。

另外，如果我们需要在使用构建工具时传递环境变量，可以使用 process.env。

在 .env.development 文件中定义开发环境的 API 地址：

VUE_APP_API_URL=https://dev-api.example.com

在 .env.production 文件中定义生产环境的 API 地址：

VUE_APP_API_URL=https://api.example.com

然后，在应用的代码中使用 process.env.VUE_APP_API_URL 获取对应的 API 地址：

const apiUrl = process.env.VUE_APP_API_URL;

这样，在构建时会根据当前环境的配置文件自动填充对应的 API 地址。

总结

在 Vue.js 应用中，window.ENV、process.env 和 window._env 都是用于存储和获取环境变量的方式，但它们在使用方式和作用上有所区别。

• window.ENV 是一个全局变量，在整个应用中可用，可以存储任意类型的值。
• process.env 是 Node.js 的全局变量，在构建时被赋值，用于存储环境变量。它在运行时无法动态修改。
• window._env 是一种将环境变量传递给前端应用的替代方式，可以在运行时根据不同环境加载不同的环境变量。

根据应用的具体需求和场景，选择适合的方式来管理和使用环境变量，可以更好地提高开发效率和应用的灵活性。