Aran 发布的文章
Vue SSR开发环境API代理解决方案
Vue SSR开发环境中涉及到的数据API代理设置解决方案，整理总结如下。
此方案采用vue-cli@2 + webpack@3 + node + express + axios架构。
一、devServer代理设置
用devServer作为CSR模式的本地开发服务器时，数据请求由浏览器发出，devServer响应，proxy直接配置在webpack.dev.conf中即可。
// config/index.js
module.exports = {
dev: {
proxyTable: {
'/api': {
target: 'http://dev.wrrok.com:8080/',
changeOrigin: true
}
},
apiProxy: 'http://dev.wrrok.com:8080/'
}
};
// build/webpack.dev.conf.js
const devWebpackConfig = merge(baseWebpackConfig, {
devServer: {
proxy: config.dev.proxyTable
}
});二、express服务器代理设置
用express作为SSR模式的本地开发服务器时，客户端渲染期间的数据请求由浏览器发出，express响应，proxy需要配置在express中。
// server.js
const {createProxyMiddleware} = require('http-proxy-middleware');
app.use('/api', createProxyMiddleware({
target: 'http://dev.wrrok.com:8080/',
changeOrigin: true,
ws: true
}));三、服务端数据预取请求Mock
在Vue的SSR服务端渲染期间，服务端数据预取请求由node发出，通过以上两种方式配置的API代理地址均不起作用。如果本地不存在对应的API，会报Error: connect ECONNREFUSED 127.0.0.1:80错误。解决方法是通过设置axios的baseURL将API请求Mock到数据服务器地址，此处用到了webpack的DefinePlugin插件，具体实现如下：
// webpack.server.conf.js
module.exports = merge(baseWebpackConfig, {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"',
'process.env.VUE_ENV': '"server"',
'process.env.API_BASE_URL': JSON.stringify(config.dev.apiProxy)
})
]
});
// api.js
import http from 'axios';
if (process.env.NODE_ENV === 'development' && process.env.VUE_ENV === 'server') {
http.defaults.baseURL = process.env.API_BASE_URL;
}这样就可以根据Vue的实际运行环境，在服务端数据预取时自动加上API代理地址，客户端渲染时仍然按照devServer的proxy进行请求。
