Vue 2.0 服务器端渲染与#app 容器内的模板答案

【问题标题】：Vue 2.0 server-side-render with template inside #app containerVue 2.0 服务器端渲染与#app 容器内的模板
【发布时间】：2017-09-08 23:06:10
【问题描述】：

服务端渲染页面供参考：ssr.html

现在的问题是，如果我们想在 html 文件本身的 <div id="app"></div> 中定义模板，而不是在 Vue 实例模板属性中定义模板怎么办？像这样：

<div id="app">You have been here for {{ counter }} seconds.</div>

在这种情况下，如果我们想预渲染它，我们将获得下一个预渲染的 html：

<div id="app" server-rendered="true">You have been here for 0 seconds&period;</div>

这里是冲突问题。如果我们要输出预渲染的 html，我们会丢失模板，并且 Vue 不知道在 <div id="app"> 内输出计数器的位置。

是否有可能以某种方式在<div id="app"></div> 容器内提供模板并同时预渲染它？或者在 html 中预渲染附近提供模板（这样 Vue 会知道这里是预渲染的，这里是模板，如果模型发生任何变化，我会使用它）？

【问题讨论】：

【解决方案1】：

是否有可能以某种方式在容器内提供模板并同时预渲染它？或者

简短但完整的答案：不。对于 Vue SSR，您不能使用 DOM 内模板。您必须使用基于字符串的模板（包括单个文件组件）。

【讨论】：