【Vue3】env环境变量的配置和使用（区分cli和vite）

### 如何在 Vue 3 项目中使用环境变量 为了使应用程序适应不同的部署环境（如开发、测试和生产），可以利用环境变量来管理配置。对于基于 Vue CLI 创建的 Vue 3 项目，设置环境变量的方式遵循特定模式。 #### 定义环境变量 创建不同命名前缀的 `.env` 文件用于区分各种运行时上下文： - `.env`: 所有环境中都会加载的基础配置。 - `.env.development`: 开发环境下特有的配置项。 - `.env.production`: 生产环境下使用的配置参数。 这些文件应放置于项目的根目录下，并且每一行定义一个键值对形式的变量，例如 `VUE_APP_API_URL=http://api.example.com`[^1]。 注意：只有以 `VUE_APP_` 开头的变量会被嵌入客户端侧的应用程序代码中；其他类型的环境变量仅限服务端读取或构建过程内部使用[^2]。 #### 访问环境变量 一旦设置了上述环境变量，在组件或其他 JavaScript 文件内可以通过 `import.meta.env.VITE_VAR_NAME` 或者 `process.env.VUE_APP_VAR_NAME` 来获取它们的值。前者适用于 Vite 构建工具，而后者则是针对 Webpack 和 Vue CLI 的情况[^4]。 ```javascript console.log(import.meta.env.VITE_MY_VARIABLE); // 如果使用的是 Vite // OR console.log(process.env.VUE_APP_MY_VARIABLE); // 对于 Vue CLI + Webpack ``` 当涉及到像 Axios 这样的 HTTP 请求库时，可以在初始化实例时传入基础 URL 等依赖外部条件变化的信息作为选项之一，从而实现动态调整请求目标地址的目的。 ```javascript const axiosInstance = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || process.env.VUE_APP_API_BASE_URL, }); ```