【转】[Vue] 环境变量介绍

转自：kimi.ai

在 Vue CLI 项目中，环境变量的配置和使用是一个常见的需求，主要用于区分开发、测试和生产环境。以下是关于 Vue 文件中的环境变量以及如何通过 vue.config.js 配置 Webpack 的详细说明：

1. Vue 项目中的环境变量

环境变量文件

Vue CLI 支持通过 .env 文件来配置环境变量。这些文件通常位于项目的根目录下，常见的文件包括：

• .env：所有环境都会加载的基础配置文件。
• .env.development：开发环境特定的配置文件。
• .env.production：生产环境特定的配置文件。
• .env.test：测试环境特定的配置文件。

环境变量的命名规则

环境变量的名称必须以 VUE_APP_ 开头，例如：

plaintext复制

VUE_APP_API_URL=https://api.example.com
VUE_APP_FEATURE_FLAG=true

这些变量会被 Webpack 的 DefinePlugin 静态嵌入到客户端代码中。

访问环境变量

在 Vue 组件或 JavaScript 文件中，可以通过 process.env 对象访问这些变量：

JavaScript复制

console.log(process.env.VUE_APP_API_URL);
if (process.env.VUE_APP_FEATURE_FLAG === 'true') {
  // 启用特性
}

此外，Vue CLI 会自动注入两个特殊的变量：

• NODE_ENV：表示当前运行的模式（development、production 或 test）。
• BASE_URL：与 vue.config.js 中的 publicPath 选项相符。

2. 在 vue.config.js 中配置 Webpack

vue.config.js 是 Vue CLI 项目中的一个可选配置文件，用于自定义项目的构建配置。通过 configureWebpack，你可以直接修改 Webpack 的配置。

configureWebpack 的使用

configureWebpack 可以是一个对象或一个函数，具体取决于你的需求：

• 作为对象使用：Vue CLI 会使用 webpack-merge 将这个对象合并到最终的 Webpack 配置中。
• 作为函数使用：函数会接收默认的 Webpack 配置作为参数，你可以修改配置并返回一个被克隆或修改过的配置版本。

示例：添加 Webpack 插件

以下是一个示例，展示了如何在 vue.config.js 中使用 configureWebpack 添加一个 Webpack 插件：

JavaScript复制

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL),
          VUE_APP_FEATURE_FLAG: JSON.stringify(process.env.VUE_APP_FEATURE_FLAG)
        }
      })
    ]
  }
};

在这个示例中，DefinePlugin 用于定义环境变量，这些变量可以通过 process.env 在代码中访问。

3. 环境变量的优先级

当在不同的文件中定义了相同的环境变量时，Vue CLI 会按照以下优先级加载：

1. 命令行参数传递的环境变量。
2. .env.[mode] 文件（如 .env.production）。
3. .env 文件。

总结

在 Vue CLI 项目中，通过 .env 文件可以轻松管理不同环境下的配置。环境变量的名称必须以 VUE_APP_ 开头，并可以通过 process.env 在代码中访问。通过 vue.config.js 中的 configureWebpack，你可以进一步自定义 Webpack 的配置，以满足项目的特定需求。

---

NODE_ENV 是一个在 Node.js 和前端项目中广泛使用的环境变量，用于指示当前运行的环境类型（如开发环境、生产环境或测试环境）。在 Vue CLI 项目中，NODE_ENV 也是一个非常重要的环境变量，它会影响项目的构建和运行行为。

NODE_ENV 的用途

NODE_ENV 的值通常有以下几种：

• development：开发环境。
• production：生产环境。
• test：测试环境。

1. 影响构建行为

NODE_ENV 的值会影响 Webpack 的构建行为：

• development：在开发模式下，Webpack 会启用热重载（HMR）、未压缩的代码、详细的错误信息等。
• production：在生产模式下，Webpack 会压缩代码、提取公共代码、优化性能等。
• test：在测试模式下，Webpack 会进行一些特定的配置，以支持测试运行。

2. 影响环境变量加载

Vue CLI 会根据 NODE_ENV 的值加载对应的 .env 文件：

• 如果 NODE_ENV=development，Vue CLI 会加载 .env.development 文件。
• 如果 NODE_ENV=production，Vue CLI 会加载 .env.production 文件。
• 如果 NODE_ENV=test，Vue CLI 会加载 .env.test 文件。
• 如果没有指定 NODE_ENV，Vue CLI 会加载 .env 文件。

3. 在代码中使用

你可以在代码中通过 process.env.NODE_ENV 访问 NODE_ENV 的值，从而根据环境执行不同的逻辑。例如：

JavaScript复制

if (process.env.NODE_ENV === 'production') {
  console.log('Running in production mode');
} else {
  console.log('Running in development mode');
}

如何设置 NODE_ENV

NODE_ENV 的值可以通过以下几种方式设置：

1. 环境变量

在运行项目时，可以通过命令行设置 NODE_ENV 的值：

bash复制

NODE_ENV=production npm run build

2. .env 文件

在 .env 文件中设置 NODE_ENV 的值：

plaintext复制

# .env.production
NODE_ENV=production

# .env.development
NODE_ENV=development

# .env.test
NODE_ENV=test

3. vue.config.js

在 vue.config.js 文件中，可以通过 process.env.NODE_ENV 访问当前的环境值，并根据需要进行配置：

JavaScript复制

module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境的配置
    } else {
      // 开发环境的配置
    }
  }
};

注意事项

• 默认值：如果未显式设置 NODE_ENV，Vue CLI 默认会将其设置为 development。
• 影响性能：在生产环境中，确保 NODE_ENV 被设置为 production，以启用代码压缩和性能优化。
• 测试环境：在运行测试时，通常将 NODE_ENV 设置为 test，以启用测试相关的配置。

总结

NODE_ENV 是一个非常重要的环境变量，用于指示当前运行的环境类型。它会影响项目的构建行为、环境变量加载以及代码中的逻辑。通过合理设置和使用 NODE_ENV，你可以确保项目在不同环境下的正确运行和性能优化。

---

在 Vue CLI 项目中，BASE_URL 是一个默认的环境变量，由 Vue CLI 提供，用于指定项目的根路径。它通常用于配置静态资源的路径或作为构建输出的公共路径。以下是 BASE_URL 的用途和配置方法：

BASE_URL 的用途

1. 指定静态资源路径：BASE_URL 用于定义项目中静态资源（如图片、CSS 文件等）的根路径。在开发和生产环境中，这可以帮助正确加载静态资源。
2. 简化路由配置：在使用 Vue Router 时，BASE_URL 可以作为路由的基础路径，确保路由的正确性。
3. 简化 HTTP 请求：在使用 HTTP 客户端（如 Axios）时，BASE_URL 可以作为请求的基础路径，简化请求的编写。

如何配置 BASE_URL

BASE_URL 的值可以通过 vue.config.js 文件中的 publicPath 选项来设置。例如：

JavaScript复制

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/your-production-sub-path/' : '/'
};

在生产环境中，BASE_URL 会被设置为 /your-production-sub-path/，而在开发环境中则为根路径 /。

使用环境变量

你还可以通过环境变量文件（如 .env.production、.env.development）来动态设置 BASE_URL。例如：

plaintext复制

// .env.production
VUE_APP_BASE_URL=/your-production-sub-path/

// .env.development
VUE_APP_BASE_URL=/

然后在代码中使用 process.env.VUE_APP_BASE_URL 来获取相应的值。

在项目中使用 BASE_URL

• 静态资源：在 HTML 或 Vue 组件中，可以直接使用 <%= BASE_URL %> 来引用静态资源。
• HTTP 请求：在配置 Axios 时，可以将 BASE_URL 设置为 Axios 的 baseURL。
• 路由配置：在 Vue Router 中，可以通过 base 选项设置路由的基础路径。

总结

BASE_URL 是 Vue CLI 提供的一个默认环境变量，用于指定项目的根路径。它在配置静态资源路径、路由和 HTTP 请求时非常有用。通过在 vue.config.js 中设置 publicPath 或使用环境变量文件，你可以灵活地配置 BASE_URL，以满足不同环境的需求。