Vue.js 使用ASP.NET Core 2在服务器端呈现Vue

我试图了解在使用aspnet core时使用vuejs进行服务器端渲染的用法和局限性

我曾经设置过一个简单的vue站点，该站点基于以下代码运行：

然后，我修改了项目以更新aspnet预渲染，并添加了vue服务器渲染器，编译了大量源代码以拼凑此更新：

如果我运行此项目，站点似乎加载良好，如果我在浏览器中关闭javascript，我可以看到服务器端渲染执行并填充html结果：

但是，由于JavaScript被禁用，内容不会被移动到dom中，因为它看起来像是在尝试

我对服务器端呈现的理解是，它将完全填充html并向用户提供完整的页面，这样即使禁用了JS，用户也至少能够看到页面（特别是用于SEO目的）。我错了吗

现在我相信现代搜索引擎会执行像这样的简单脚本来获取内容，但如果js被禁用，我仍然不希望呈现空白页面

这是服务器端渲染的一个限制，或者可能是使用vue和/或aspnet核心的特定ssr

还是我只是错过了一步

编辑：更多信息

我查看了源代码，我认为这是预呈现此部分的方法：

线路

output.Content.SetHtmlContent(result.Html); 

result.Html的值为空。但是，当我手动编辑此值以放入测试值时，它也不会呈现到输出html，并且app div标记仍然为空

如果我在用预期的输出填充result.Html值时出错，这是一件事，我希望在这方面能得到一些帮助，特别是因为似乎找到了输出Html，因为它在紧接着的脚本中

---

然而，即使我要填充它，它似乎被跳过了，我手动更改了值就证明了这一点。这是代码中的错误还是我做错了什么，或者两者都有？

正如您正确注意到的，对于您的项目，标记帮助程序中的

result.Html

为空。因此，该行不能是生成输出的位置。由于预渲染脚本的HTML输出也不包括

script

标记，因此很明显，必须有一些东西来生成该标记。唯一可以执行此操作的其他行是来自的以下行：

output.PostElement.SetHtmlContent（$“{globalsScript}”）；

这将符合观察到的输出，因此我们应该找出

globalsScript

的来源

如果查看该实现，可以看到它将调用

Prerenderer.RenderToString

，返回一个值。调用节点脚本后，将从JSON反序列化此结果对象

所以这里有两个有趣的属性：

Html

，和

Globals

。前者负责包含最终在标记帮助器中呈现的HTML输出。后者是一个JSON对象，包含应为客户端设置的其他全局变量。这些是将在

脚本

标记中呈现的内容

如果查看项目中呈现的HTML，可以看到有两个全局变量：

window.HTML

和

window.\uu初始状态\uuu

。因此，这两个设置在代码中的某个位置，尽管

html

不应该是全局的

罪魁祸首是

renderOnServer.js

文件：

vue\u renderer.renderString（上下文，（err，\u html）=>{
if（err）{拒绝（err.message）}
决心({
全球：{
html:_html，
__初始状态：context.STATE
}
})
})

如您所见，这将解析只包含

globals

对象的结果，该对象同时具有

html

和

初始状态属性。这就是
脚本
标记内部呈现的内容

但是您要做的是将
html
不是作为
globals
的一部分，而是在上面的层上，以便将其反序列化到
RenderToStringResult.html
属性中：

解析({
html:_html，
全球：{
__初始状态：context.STATE
}
})

如果您这样做，您的项目将正确地执行服务器端渲染，而不需要初始视图使用JavaScript。
啊，很明显，我想我已经接近了；我可以看出属性位于错误的位置，但我没有想到这是因为解析中设置参数的方式。将html移到globals之外确实奏效了！非常感谢您的关注和帮助，谢谢您让我重回正轨！