新Vue-cli的api接口设置问题

最新推荐文章于 2023-09-23 19:50:54 发布

原创最新推荐文章于 2023-09-23 19:50:54 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#接口 #vue

本文介绍Vue CLI新版本中如何使用代理配置替代process.env.VUE_APP_BASE_API参数，实现请求地址的灵活设置。通过配置proxy对象，可以轻松解决接口跨域问题，并将请求重定向至目标API地址。

1.旧版本

在之前的vue-cli版本中，是使用process.env.VUE_APP_BASE_API这个参数来获取准确地址进行请求

2.新版本

然而这个方式已经在新版本中使用了反向代理的方式取代，具体是哪个版本开始就没有具体查看，大概是3.x以后，笔者使用的是@vue/cli 4.2.3版本

proxy: {
 // 本地请求地址
 '/api': {
   // 代理地址
   target: twelvet.api,
   ws: true,
   // 如果接口跨域，需要进行这个参数配置
   changeOrigin: true,
   // 重写代理请求地址/，不然会/api/**
   pathRewrite: {
     '^/api': '/'
   }
 },
}