Aran 发布的文章
Vue SSR开发环境API代理解决方案
Vue SSR开发环境中涉及到的数据API代理设置解决方案,整理总结如下。
此方案采用vue-cli@2 + webpack@3 + node + express + axios
架构。
一、devServer代理设置
用devServer作为CSR模式的本地开发服务器时,数据请求由浏览器发出,devServer响应,proxy直接配置在webpack.dev.conf
中即可。
二、express服务器代理设置
用express作为SSR模式的本地开发服务器时,客户端渲染期间的数据请求由浏览器发出,express响应,proxy需要配置在express中。
三、服务端数据预取请求Mock
在Vue的SSR服务端渲染期间,服务端数据预取
请求由node发出,通过以上两种方式配置的API代理地址均不起作用。如果本地不存在对应的API,会报Error: connect ECONNREFUSED 127.0.0.1:80
错误。解决方法是通过设置axios
的baseURL
将API请求Mock到数据服务器地址,此处用到了webpack的DefinePlugin
插件,具体实现如下:
这样就可以根据Vue的实际运行环境,在服务端数据预取时自动加上API代理地址,客户端渲染时仍然按照devServer的proxy进行请求。