前端代理映射配置？

作者站长头像
站长
· 阅读数 26

背景：

vue3+vite项目中：前后端联调的时候，代理转发设置成功，但是由于接口文件中有多个文件,一个个加代理配置比较麻烦，所以想着给接口增加前缀的方式去统一设置代码

比如接口文件中有如下两个接口，url分别如下

'/chekTicketData/list'，
'/getManagerData/page'，

统一增加前缀/sys

'/sys/chekTicketData/list'，
'/sys/getManagerData/page'，

在本地.env.development文件中统一配置设置转发

VITE_PROXY = '[
  ["/api/sys", "http://10.9.33.8:10049"]
]'

接口可以正常响应，但是这个/sys是自己自定义的,而且这个设置是在.env.development。请问下要在项目的测试环境和生产环境做映射吗？映射/sys对应的服务

回复
1个回答
avatar
test
2024-06-20

前端代码里面加下环境判断增减前缀就行了，测试环境和生产环境都不用动。

const apiPrefix = import.meta.env.MODE === 'development' ? '/sys' : '';

`${apiPrefix}/chekTicketData/list`，

也可以直接在你的请求工具中加（比如axios），这样就不用每个接口上加前缀了。

如果/sys是前端单方面加的，需要使用rewrite去掉：

{
  '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
}

https://www.vitejs.net/config/#server-proxy

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容