vue项目开发中devServer.proxy使用

背景：我们在项目开发中，一般情况下前端应用和后端 API 服务器是没有运行在同一个主机上的，如果直接访问后端接口的话就会报错，前后端代码如下图所示：



处理方式为需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置，配置之后需要重新启动即可正常访问，如下图所示：


测试补充：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后才会读取到这个配置文件(对于整个启动流程暂不是非常清楚，如有问题，欢迎指正)