Vue CLI 4/3中全局API地址配置优化：从process.env.BASE_API到process.env.VUE_APP_BASE_API

引言

在Vue项目中，经常需要根据不同的运行环境（如开发环境、测试环境和生产环境）来切换后端API的基础地址。Vue CLI提供了灵活的环境变量和模式配置功能，使得这一需求变得简单且易于管理。在Vue CLI 4/3中，推荐使用以VUE_APP_开头的环境变量，这是为了确保这些变量可以在客户端代码（如JavaScript）中被访问。而Vue CLI 2中常用的process.env.BASE_API方式在Vue CLI 4/3中依然有效，但为了遵循最佳实践，我们应当转向使用VUE_APP_前缀。

配置环境变量

1. 在项目根目录下创建.env文件

Vue CLI会自动加载项目根目录下的.env文件，并解析其中的环境变量。你可以根据需要创建不同环境的配置文件，如.env.development（开发环境）、.env.production（生产环境）和.env.test（测试环境）。

示例：.env.development

VUE_APP_BASE_API=http://dev-api.example.com

2. 引用环境变量

在Vue组件、Vuex、Axios实例等地方，你可以通过process.env.VUE_APP_BASE_API来引用这个环境变量。

示例：在Axios实例中配置基础URL

// src/plugins/axios.js
import axios from 'axios';
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量
  timeout: 5000 // 请求超时时间
});
export default service;

注意事项

• 只有以VUE_APP_开头的变量会被webpack定义到客户端侧的process.env中。你可以通过process.env.NODE_ENV查看当前的环境模式，但它并不需要通过VUE_APP_前缀来访问。
• 避免在.env文件中存储敏感信息，如数据库密码或API密钥。考虑使用.env.local、.env.[mode].local等本地文件来存储这些敏感信息，并确保这些文件不会被版本控制系统（如Git）跟踪。
• 当你需要为不同环境配置不同的API地址时，请确保在相应的.env.[mode]文件中设置了正确的VUE_APP_BASE_API值。

实战应用

假设你正在开发一个电商应用，需要根据不同的环境调用不同的后端API。你可以在.env.development中设置开发环境的API地址，在.env.production中设置生产环境的API地址。然后，在Vue项目中通过process.env.VUE_APP_BASE_API来引用这些地址，无需在每个请求中硬编码。

结论

通过使用process.env.VUE_APP_BASE_API代替Vue CLI 2中的process.env.BASE_API，我们不仅可以遵循Vue CLI 4/3的最佳实践，还可以提高项目的灵活性和可维护性。通过为不同环境配置不同的.env文件，我们可以轻松地在不同环境之间切换API地址，而无需修改代码。希望这篇文章能够帮助你更好地理解和使用Vue CLI中的环境变量功能。