Vue3之环境变量

在企业级项目开发中我们希望封装出来的 axios 模块，能够根据当前模式的不同，设定不同的 BaseUrl ，因为通常情况下企业级项目在开发状态和生产状态下它的 baseUrl 是不同的。

这个问题就必须要使用到 @vue/cli 所提供的 环境变量 (opens new window) 来去进行实现，我们在项目跟目录（和Src同级）中创建两个文件：.env.development和.env.production

.env.development

# 标志
ENV = 'development'

# base api
VITE_APP_BASE_API = '/api' # 必须以VITE_APP开头

.env.production

# 标志
ENV = 'production'

# base api
VITE_APP_BASE_API = '/prod-api'

获取值

在项目的任意位置使用import.meta.env.VITE_APP_BASE_API获取值，例如axios中

import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000
})

export default service