Appearance
在企业级项目开发中我们希望封装出来的 axios
模块,能够根据当前模式的不同,设定不同的 BaseUrl
,因为通常情况下企业级项目在开发状态和生产状态下它的 baseUrl
是不同的。
这个问题就必须要使用到 @vue/cli
所提供的 环境变量 来去进行实现,我们在项目跟目录(和Src同级)中创建两个文件:.env.development
和.env.production
.env.development
shell
# 标志
ENV = 'development'
# base api
VITE_APP_BASE_API = '/api' # 必须以VITE_APP开头
.env.production
shell
# 标志
ENV = 'production'
# base api
VITE_APP_BASE_API = '/prod-api'
获取值
在项目的任意位置使用import.meta.env.VITE_APP_BASE_API
获取值,例如axios中
javascript
import axios from 'axios'
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000
})
export default service