标签 vue 下的文章

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进行请求。

参考链接：axios的Config Defaults webpack的DefinePlugin插件