设置基本的路径


环境文件

我们可以在.env.development.env.production定义变量,变量自动就为当前环境的值

基础模板在以上文件定义了变量VUE_APP_BASE_API,该变量可以作为axios请求的baseURL

我们会发现,在模板中,两个值分别为/dev-api/prod-api

但是我们的开发环境代理是/api,所以可以统一下

# 开发环境的基础地址和代理对应
VUE_APP_BASE_API = '/api'
# 这里配置了/api,意味着需要在Nginx服务器上为该服务配置 nginx的反向代理对应/prod-api的地址 
VUE_APP_BASE_API = '/prod-api'  

本节注意:我们这里生产环境和开发环境设置了不同的值,后续我们还会在生产环境部署的时候,去配置该值所对应的反向代理,反向代理指向哪个地址,完全由我们自己决定,不会和开发环境冲突

在request中设置baseUrl

const service = axios.create({
 // 如果执行 npm run dev 值为 /api 正确 /api 这个代理只是给开发环境配置的代理
 // 如果执行 npm run build 值为 /prod-api 没关系 运维应该在上线的时候 给你配置上 /prod-api的代理
 baseURL: process.env.VUE_APP_BASE_API, // 设置axios请求的基础的基础地址
 timeout: 5000 // 定义5秒超时
}) // 创建一个axios的实例