当你在渲染
Vue应用程序时，
renderer只从应用程序生成
HTML标记。在这个示例中，我们必须用一个额外的
HTML页面包裹容器，来包裹生成的
HTML标记。为了简化这些，你可以直接在创建
renderer时提供一个页面模板。多数时候，我们会将页面模板放在特有的文件中：
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>然后，我们可以读取和传输文件到
Vue renderer中：
const tpl = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8');
const renderer = vssr.createRenderer({
template: tpl,
});Webpack配置
然而在实际项目中，不止上述例子那么简单，需要考虑很多方面：路由、数据预取、组件化、全局状态等，所以服务端渲染不是只用一个简单的模板，然后加上使用
vue-server-renderer完成的，如下面的示意图所示：
如示意图所示，一般的
Vue服务端渲染项目，有两个项目入口文件，分别为
entry-client.js和
entry-server.js，一个仅运行在客户端，一个仅运行在服务端，经过
Webpack打包后，会生成两个
Bundle，服务端的
Bundle会用于在服务端使用虚拟
DOM生成应用程序的“快照”，客户端的
Bundle会在浏览器执行。因此，我们需要两个
Webpack配置，分别命名为
webpack.client.config.js和
webpack.server.config.js，分别用于生成客户端
Bundle与服务端
Bundle，分别命名为
vue-ssr-client-manifest.json与
vue-ssr-server-bundle.json，关于如何配置，
Vue
