Vue 2

在 Vue 2 中，可以通过检查 process.env.NODE_ENV 变量来确定当前是生产环境还是开发环境。在开发环境下，process.env.NODE_ENV 的值通常是 development，而在生产环境下，它通常被设置为 production。

if (process.env.NODE_ENV === 'production') {
  // 生产环境逻辑
  console.log('这是生产环境');
} else {
  // 开发环境逻辑
  console.log('这是开发环境');
}

注意

请注意，在生产环境下，许多构建工具（比如 Webpack）会自动将 process.env.NODE_ENV 设置为 production。而在开发过程中，通常不需要手动设置此变量，它会被构建工具自动识别。

Vue 3

Vite 是一个现代化的前端构建工具，它提供了内置的环境变量来辨别当前环境是生产环境还是开发环境。在 Vite 中，可以通过检查 import.meta.env 对象来获取当前环境的信息。

import.meta.env 对象包含了一些常用的环境变量，其中最重要的是 MODE 变量。MODE 变量表示当前的构建模式，可以是 development（开发模式）或 production（生产模式）。

要判断当前环境是否为生产环境，可以通过以下方式：

if (import.meta.env.MODE === 'production') {
// 生产环境逻辑
} else {
// 开发环境逻辑
}

在上述代码中，我们通过检查 import.meta.env.MODE 的值来确定当前环境。如果 MODE 的值为 'production'，则表示当前是生产环境，否则，表示当前是开发环境。

除了 MODE 变量，import.meta.env 对象还提供了其他一些有用的环境变量，例如：

• BASE_URL：当前应用的基础 URL。
• DEV：一个布尔值，表示当前是否为开发模式。
• PROD：一个布尔值，表示当前是否为生产模式。
• MODE：当前的构建模式，如 'development' 或 'production'。
• NODE_ENV：Node.js 的环境变量，与 MODE 一样表示当前的构建模式。

通过使用这些环境变量，你可以根据不同的环境执行相应的逻辑，例如在开发环境下启用调试工具或模拟数据，而在生产环境下进行代码压缩和优化。

如果需要在不同的环境中设置不同的环境变量，可以创建多个 .env 文件，并分别命名为 .env.development、.env.production 等。Vite 会根据当前的构建模式自动加载相应的文件，并将其中的环境变量注入到应用程序中。

注意

在生产模式下，Vite 会自动忽略所有以 VITE_开头的环境变量，并将它们替换为实际的值。这是为了避免在生产环境中暴露敏感信息。如果需要在生产环境中使用特定的环境变量，可以通过 Vite 的配置文件手动指定。在 Vite 中，这些环境变量是在构建时由 Vite 自动生成的，并不是在运行时由浏览器提供的。因此，它们在开发过程中是可靠且准确的，但在使用打包工具（如 Rollup 或 Webpack）进行构建时，可能需要额外的配置来确保环境变量的正确性。