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。