Vue.js与 ASP.NET Core 服务端渲染功能整合

编辑：rootadmin

推荐整理分享Vue.js与 ASP.NET Core 服务端渲染功能整合，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

Gyöngyösi译者：oopsguy.com

我真的很喜欢在前端使用 Vue.js，Vue 服务端渲染直到第二个版本才被支持。在本例中，我想展示如何将 Vue.js 服务端渲染功能整合 ASP.NET Core。我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包，该包提供 ASP.NET Core API，以便于我们可以使用上下文信息调用 Node.js 托管的 JavaScript 代码，并将生成的 HTML 字符串注入渲染页面。

在此示例中，应用程序将展示一个消息列表，服务端只渲染最后两条消息（按日期排序）。可以通过点击“获取消息”按钮从服务端下载剩余的消息。

项目结构如下所示：

正如你看到的，Vue 应用位于 VueApp 文件夹下，它有两个组件、一个包含了一个 mutation 和一个 action 的简单 Vuex store 和一些我们接下来要讨论的其他文件：app.js、client.js、 renderOnServer.js、server.js。

实现 Vue.js 服务端渲染

要使用服务端渲染，我们必须从 Vue 应用创建两个不同的 bundle：一个用于服务端（由 Node.js 运行），另一个用于将在浏览器中运行并在客户端上混合应用。

app.js

引导此模块中的 Vue 实例。它由两个 bundle 共同使用。

server.js

此服务端 bundle 的入口点导出一个函数，该函数有一个 context 属性，可用于从渲染调用中推送任何数据。

client.js

客户端 bundle 的入口点，其用一个名为 INITIAL_STATE 的全局 Javascript 对象（该对象将由预渲染模块创建）替换 store 的当前状态，并将应用挂载到指定的元素（.my-app）。

Webpack 配置

为了创建 bundle，我们必须添加两个 Webpack 配置文件（一个用于服务端，一个用于客户端构建），不要忘了安装 Webpack，如果尚未安装，则：npm install -g webpack。

运行 webpack --config webpack.server.config.js，如果运行成功，则可以在 /wwwroot/dist/bundle.server.js 找到服端 bundle。获取客户端 bundle 请运行 webpack --config webpack.client.config.js，相关输出可以在 /wwwroot/dist/bundle.client.js 中找到。

实现 Bundle Render

该模块将由 ASP.NET Core 执行，其负责：

渲染我们之前创建的服务端 bundle

将 **window.__ INITIAL_STATE__** 设置为从服务端发送的对象

实现 ASP.NET Core 部分

如之前所述，我们使用了 Microsoft.AspNetCore.SpaServices 包，它提供了一些 TagHelper，可轻松调用 Node.js 托管的 Javascript（在后台，SpaServices 使用 Microsoft.AspNetCore.NodeServices 包来执行 Javascript）。

Views/_ViewImports.cshtml

为了使用 SpaServices 的 TagHelper，我们需要将它们添加到 _ViewImports 中。

它从 MessageStore（仅用于演示目的的一些静态数据）中获取两条最新的消息（按日期倒序排序），并创建一个 ClientState 对象，该对象将被用作 Vuex store 的初始状态。

Vuex store 默认状态：

Index View

最后，我们有了初始状态（来自服务端）和 Vue 应用，所以只需一个步骤：使用 asp-prerender-module 和 asp-prerender-data TagHelper 在视图中渲染 Vue 应用的初始值。

asp-prerender-module 属性用于指定要渲染的模块（在我们的例子中为 VueApp/renderOnServer）。我们可以使用 asp-prerender-data 属性指定一个将被序列化并发送到模块的默认函数作为参数的对象。

您可以从以下地址下载原文的示例代码：

ASP.NET Core 服务端渲染功能整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！

浅谈Vue.js 组件中的v-on绑定自定义事件理解每个Vue实例都实现了事件接口(Eventsinterface)，即：使用$on(eventName)监听事件使用$emit(eventName)触发事件Vue的事件系统分离自浏览器的EventTargetAPI。尽管它们

Vue-cli-webpack搭建斗鱼直播步骤详解前言想必大家都看过斗鱼直播吧？这次在下使用从github上面摸下来的API，为大家重现一下斗鱼网站的搭建，使用vue-cli-webpack来实现。声明本文章所用API

Vue.js在数组中插入重复数据的实现代码 1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用track-by="$index"来实现。2、不使用track-by="$index"的数组插入，数组不支持重复数