vue项目开发中devServer.proxy使用

凡尘丶

背景:我们在项目开发中,一般情况下前端应用和后端 API 服务器是没有运行在同一个主机上的,如果直接访问后端接口的话就会报错,前后端代码如下图所示:
image.png
image.png
image.png
处理方式为需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置,配置之后需要重新启动即可正常访问,如下图所示:
image.png
image.png
测试补充:vue启动的node服务器和spring boot启动的tomcat顺序存在先后,测试发现,当先启动vue项目,默认使用8080端口,就会导致tomcat启动报错,提示8080端口被占用;若先启动tomcat,它默认使用8080端口,而再启动vue项目会使用例如8083不会导致冲突。
补充:修改vue.config.js文件后需要重新启动项目才能生效,此文件位于node_modules/@vue/cli-service/lib/Service.js中,执行npm run serve后才会读取到这个配置文件(对于整个启动流程暂不是非常清楚,如有问题,欢迎指正)
image.png

阅读 8k

这个人很懒

81 声望
0 粉丝
0 条评论

这个人很懒

81 声望
0 粉丝
文章目录
宣传栏