vue-cli 环境变量配置

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它提供了一套完整的脚手架工具，可以帮助开发者快速搭建 Vue.js 项目。在 Vue CLI 中，可以通过配置环境变量来实现不同环境下的配置。

Vue CLI 支持在项目根目录下创建一个 `.env` 文件，用于设置全局的环境变量。在该文件中，可以定义不同环境下的变量，例如：

VUE_APP_BASE_URL=http://api.example.com

上述配置中，`VUE_APP_BASE_URL` 是一个自定义的环境变量，可以在项目中通过 `process.env.VUE_APP_BASE_URL` 来访问。

除了 `.env` 文件外，Vue CLI 还支持根据不同环境创建对应的 `.env.[mode]` 文件，其中 `[mode]` 是环境的名称，例如 `.env.development`、`.env.production` 等。这样可以针对不同的环境设置不同的变量在项目中使用环境变量时，可以在代码中通过 `process.env` 来访问。例如，在 Vue 组件中可以这样使用：

<template>
  <div>
    <p>API Base URL: {{ apiUrl }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_BASE_URL
    }
  }
}
</script>

这样就可以根据不同的环境配置，动态获取对应的 API Base URL。