http://mgyongosi.com/2016/vuejs-server-side-rendering-with-aspnet-core/Original作者：Mih lygynysi译者：oopsguy.com

我真的很喜欢在前端使用Vue.js。直到第二个版本才支持Vue服务器渲染。在这个例子中，我想展示如何将Vue.js服务器端渲染功能与ASP.NET内核集成。我们使用微软。aspnetcore。spaservices包在服务器端，它提供了ASP.NET Core API，这样我们就可以使用上下文信息来调用Node.js托管的JavaScript代码，并将生成的HTML字符串注入到呈现的页面中。

在本例中，应用程序将显示一个消息列表，服务器将只呈现最后两条消息(按日期排序)。您可以通过单击“获取消息”按钮从服务器下载剩余的消息。

项目结构如下：vuejssrsample | 属性|参考资料| wwwroot| Dependencies控制器| HomeController.cs型号|client state . cs |fakemessagestore . cs |message . csview |home | |index . cshtml |_ view imports . cshtmlvueapp |components | |app . vue | | |babelrcappsettings.jsondockerfilepackages.jsonprogram.csproject.jsonstartup.csweb.configweb pack . clie nt . config . jsweb pack . server . config . js如您所见，Vue应用程序位于VueApp文件夹下，该文件夹有两个组件，一个包含突变和操作的简单Vuex存储，以及我们接下来将讨论的一些其他文件：app.js、client.js、renderOnServer.js、Server.js

实现Vue.js服务器端渲染

为了使用服务器端渲染，我们必须从Vue应用程序创建两个不同的包：一个用于服务器端(由Node.js运行)，另一个用于将在浏览器中运行并在客户端混合的应用程序。

app.js

在本模块中引导Vue实例。它由两个束使用。

从“Vue”导入Vue；从“”导入应用程序。/components/app . vue '；从“”导入存储。/vuex/store . js '；const app=new Vue({ store，app })；导出{ app，store }；server.js

这个服务器捆绑包的入口点导出了一个带有上下文属性的函数，该函数可用于从呈现调用中推送任何数据。

client.js

客户端包的入口点，它用名为INITIAL_STATE(将由预渲染模块创建)的全局Javascript对象替换存储的当前状态，并将应用程序装载到指定的元素(。my-app)。

从导入{ app，store }。/app '；store . replace STATE(_ _ INITIAL _ STATE _ _)；app。$mount('。my-app’)；Webpack配置

为了创建包，我们必须添加两个Webpack配置文件(一个用于服务器，一个用于客户端构建)，并且不要忘记安装Webpack。如果还没有安装，那就是npm install -g webpack。

网络包。服务器。配置。jsconst path=require(' path ')；模块。exports={ target : ' node '，条目：路径。join(_ dirname，' VueApp/server.js ')，output : { library target : ' common js 2 '，path : path。join(_ dirname，' wwwroot/dist ')，filename: 'bundle.server.js '，}，模块： { loaders :[{ test 3:/ .vue$/，loader: 'vue '，}，{ test: / .js $/loader : ' babel '，包含： __dirname，exclude: /node_modules/}，{ test: / .json？$/，loader: 'json' } ] }，}；网络包。客户。配置。jsconst path=require(' path ')；模块。导出={ entry :路径。join(_ dirname，' VueApp/client.js ')、output : { path : path。join(_ dirname，' wwwroot/dist ')、filename: 'bundle.client.js '，}、module : { loaders : [{ test :/ .vue$/，loader: 'vue '，}，{ test: / .js$/，loader: 'babel '，include: __dirname，exclude: /node_modules/}，] }，}；运行网络包-配置网络包。服务器。配置。js，如果运行成功，则可以在/wwwroot/dist/bundle.server.js找到服端捆绑包。获取客户端捆请运行网络包-配置网络包。客户。配置。js，相关输出可以在/wwwroot/dist/bundle.client.js中找到。

实现捆绑渲染

该模块将由ASP。网核心执行，其负责：

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

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

过程。ENV。vue _ ENV='服务器'；const fs=require(' fs ')；const path=require(' path ')；常量文件路径=路径。联接(_ _ dirname，'./wwwroot/dist/bundle。服务器。js’)常量代码=fs。readfilesync(文件路径，‘utf8’)；const bundleRenderer=require(' vue-server-renderer ').createBundleRenderer(代码)模块。导出=函数(参数){返回新的Promise(函数(解析，拒绝){ bundlerenderer。rendertostring(参数。data)，(err，resultHtml)={ //params.data是存储的初始状态。由ASP-prerender-数据属性if (err) { reject(err.message)发送；}解析({ html: resultHtml，global s : { _ _ INITIAL _ STATE _ _ : params。数据//窗口.__INITIAL_STATE__将是Vuex存储的初始状态} });});});};实现ASP。网核心部分

如之前所述，我们使用了微软。服务包，它提供了一些TagHelper，可轻松调用Node.js托管的Javascript(在后台，水疗服务使用微软。节点服务包来执行Javascript)。

视图/_视图导入。cshtml

为了使用水疗服务的TagHelper，我们需要将它们添加到_视图导入中。

@addTagHelper '*，微软。服务的主页/索引公共机构结果索引(){ var初始消息=FakeMessageStore .FakeMessages降序(m=m .日期).取(2);var初始值=新客户端状态(){ Messages=初始消息，LastFetchedmessageDate=初始消息.最后()。日期};返回视图(初始值)；}它从MessageStore(仅用于演示目的的一些静态数据)中获取两条最新的消息（按日期倒序排序),并创建一个ClientState对象，该对象将被用作Vuex商店的初始状态。

Vuex商店默认状态：

const store=new Vuex .存储({ state : { messages :[]，lastFetchedMessageDate: -1 }，//.});ClientState类：公共类客户端状态{[JsonProperty(属性名=' Messages ')]public ienumerablemessages { get；设置；}[JsonProperty(属性名=' LastFetchedmessageDate ')]public DateTime LastFetchedmessageDate { get；设置；} }索引视图

最后，我们有了初始状态（来自服务端)和某视频剪辑软件应用，所以只需一个步骤：使用ASP-prerender-模块和ASP-prerender-数据标记助手在视图中渲染某视频剪辑软件应用的初始值。

@模型VuejsSSRSample。模特。客户状态！-.-body div class=' my-app ' ASP-prerender-module=' VueApp/renderOnServer ' ASP-prerender-data=' Model '/div脚本src=' http : ~/dist/bundle . client . js ' ASP-append-version=' true '/脚本/body！-.-ASP-prerender-module属性用于指定要呈现的模块(在我们的示例中是VueApp/renderOnServer)。我们可以使用asp-prerender-data属性来指定一个对象，该对象将被序列化并作为参数发送给模块的默认函数。

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

http://github.com/mgyongyosi/VuejsSSRSample

摘要

以上是边肖介绍的Vue.js与ASP.NET核心服务器渲染功能的集成。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！