本文讲述了在Vue项目中，如何处理开发环境与生产环境API接口路径的自动切换问题。首先，由于Webpack配置导致dev-api在打包后变为prod-api。解决方法是在打包前手动设置baseURL为dev-api，打包后再改回。另外，在本地开发时，通过proxy配置可以方便地去掉路径中的/dev-api。而在线上部署时，需在nginx配置中使用rewrite规则移除/dev-api前缀，确保请求正确转发到接口服务器。
首先遇到的问题一：
一个vue模板在webpack打包后会自动把dev-api改为prod-api
原因
因为在改写封装的axios代码中的baseURL，会自动获取当前的运行环境，在打包后环境会从开发变为预览环境，则dev会变为prod
解决方法
由于模板中没有提供dev环境下打包函数，所以需要先将baseURL改为自己想要的接口，比如我的接口服务器收的就是dev-api，打包好后再改回来
问题二：
在proxy中能够重写路径，将路径中的/dev-api去除改为 “ ”
解决方法
那么在上线后，就要在nginx配置文件中写入如下代码
rewrite "^/dev-api/(.*)$" /$1 break;
总结
可以看到我的需求是将本打包为/prod-api的路径改为/dev-api
上线后反向代理将/dev-api路径地址的服务器通过proxy_pass改为接口服务器
但是接口服务器不需要/dev-api，所以rewrite "^/dev-api/(.*)$" /$1 break;去除
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
