Vue 配置环境变量的终极指南

引言

环境变量是存储特定于应用程序或环境的信息的重要变量。它们用于配置应用程序行为，例如 API 端点、日志级别或调试模式。在 Vue.js 应用中，配置环境变量对于根据不同的环境（如开发、测试、生产）定制应用行为至关重要。

配置环境变量

1. 使用 NODE_ENV

NODE_ENV 是一个特殊的环境变量，用于指示应用程序当前正在运行的环境。它通常在应用程序启动时设置，可以在代码中使用 process.env.NODE_ENV 访问。

例如：

if (process.env.NODE_ENV === 'development') {
  // 开发环境代码
} else if (process.env.NODE_ENV === 'production') {
  // 生产环境代码
}

2. 使用 VUE_APP_* 前缀

Vue.js 提供了一个特定的环境变量前缀 VUE_APP_*，可以用来定义自定义环境变量。这些变量可以在 Vue.js 应用中使用 Vue.config.get() 访问。

例如：

// vue.config.js
module.exports = {
  // ... 其他配置
  pluginOptions: {
    myPlugin: {
      API_URL: process.env.VUE_APP_API_URL,
    },
  },
};

// 组件中
import { API_URL } from '@/config';

export default {
  data() {
    return {
      apiUrl: API_URL,
    };
  },
};

3. 使用跨平台解决方案：cross-env

cross-env 是一个跨平台工具，可以帮助跨不同平台和 shell 设置环境变量。它在 package.json 脚本中使用，如下所示：

"scripts": {
  "build:dev": "cross-env NODE_ENV=development vue-cli-service build"
}

这将设置 NODE_ENV 环境变量为 "development"，并运行 "vue-cli-service build" 脚本。

使用案例

配置环境变量在 Vue.js 应用中有很多用途，包括：

• 设置不同的 API 端点（例如，开发和生产服务器）
• 启用/禁用特定功能（例如，调试模式）
• 存储敏感信息（例如，API 密钥）
• 定制日志级别

最佳实践

• 使用性变量名： 使用明确的变量名，以反映变量的用途和值。
• 避免硬编码敏感信息： 将敏感信息存储在环境变量中，而不是直接将其硬编码到代码中。
• 限制环境变量的访问： 仅向需要它们的代码部分授予对环境变量的访问权限。
• 使用 .env 文件： 创建一个 .env 文件来存储环境变量，以将其与源代码分开。

结论

配置环境变量是优化 Vue.js 应用的强大技术。通过使用 NODE_ENV、VUE_APP_* 前缀和 cross-env 等技术，可以轻松地根据不同的环境定制应用行为。通过遵循最佳实践，可以确保环境变量的安全和有效使用，从而为您的 Vue.js 应用提供稳健和可定制的基础。