}
// ...
let res = await Axios.get(`${requestUrlOrigin}${url.GET_A}`, requestParams);
commit(globalTypes.SET_A, {
res: res.data,
});
}
};
// ...
接口请求时报
connect ECONNREFUSED 127.0.0.1:80的问题原因是改造之前，使用客户端渲染时，使用了
devServer.proxy代理配置来解决跨域问题，而服务端作为代理服务器对接口发起异步请求时，不会读取对应的
webpack配置，对于服务端而言会对应请求当前域下的对应
path下的接口。解决方案为去除
webpack的
devServer.proxy配置，对于接口请求带上对应的
origin即可：
const requestUrlOrigin = requestUrlOrigin = state.ctx.URL.origin;
const res = await Axios.get(`${requestUrlOrigin}${url.GET_A}`, requestParams);对于
vue-router配置项有
base参数时，初始化时匹配不到对应路由的问题在官方示例中的
entry-server.js：
// entry-server.js
import { createApp } from './app';export default context => {
// 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
// 以便服务器能够等待所有的内容在渲染前，
// 就已经准备就绪。
return new Promise((resolve, reject) => {
const { app, router } = createApp();
// 设置服务器端 router 的位置
router.push(context.url);
// ...
});
}
原因是设置服务器端
router的位置时，
context.url为访问页面的
url，并带上了
base，在
router.push时应该去除
base，如下所示：
router.push(context.url.replace('/base', ''));小结
本文为笔者通过对现有项目进行改造，给现有项目加上
Vue服务端渲染的实践过程的总结。首先阐述了什么是
Vue服务端渲染，其目的、本质及原理，通过在服务端使用
Vue的虚拟
DOM
