脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → ASP.NET Core 与 Vue.js 服务端渲染

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

 更新时间：2017年11月16日 16:14:01   投稿：mrr  
本文通过案例给大家详细分析了ASP.NET Core 与 Vue.js 服务端渲染,需要的朋友可以参考下

http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/
原作者：Mihály Gyöngyösi
译者：oopsguy.com

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

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

项目结构如下所示：

.
├── VuejsSSRSample
| ├── Properties
| ├── References
| ├── wwwroot
| └── Dependencies
├── Controllers
| └── HomeController.cs
├── Models
| ├── ClientState.cs
| ├── FakeMessageStore.cs
| └── Message.cs
├── Views
| ├── Home
| | └── Index.cshtml
| └── _ViewImports.cshtml
├── VueApp
| ├── components
| | ├── App.vue
| | └── Message.vue
| ├── vuex
| | ├── actions.js
| | └── store.js
| ├── app.js
| ├── client.js
| ├── renderOnServer.js
| └── server.js
├── .babelrc
├── appsettings.json
├── Dockerfile
├── packages.json
├── Program.cs
├── project.json
├── Startup.cs
├── web.config
├── webpack.client.config.js
└── webpack.server.config.js

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

实现 Vue.js 服务端渲染

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

app.js

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

import Vue from 'vue';
import App from './components/App.vue';
import store from './vuex/store.js';
const app = new Vue({
 store,
 ...App
});
export { app, store };

server.js

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

client.js

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

import { app, store } from './app';
store.replaceState(__INITIAL_STATE__);
app.$mount('.my-app');

Webpack 配置

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

webpack.server.config.js
const path = require('path');
module.exports = {
 target: 'node',
 entry: path.join(__dirname, 'VueApp/server.js'),
 output: {
 libraryTarget: 'commonjs2',
 path: path.join(__dirname, 'wwwroot/dist'),
 filename: 'bundle.server.js',
 },
 module: {
 loaders: [
  {
  test: /\.vue$/,
  loader: 'vue',
  },
  {
  test: /\.js$/,
  loader: 'babel',
  include: __dirname,
  exclude: /node_modules/
  },
  {
  test: /\.json?$/,
  loader: 'json'
  }
 ]
 },
};
webpack.client.config.js
const path = require('path');
module.exports = {
 entry: path.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/
  },
 ]
 },
};

运行 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__** 设置为从服务端发送的对象

process.env.VUE_ENV = 'server';
const fs = require('fs');
const path = require('path');
const filePath = path.join(__dirname, '../wwwroot/dist/bundle.server.js')
const code = fs.readFileSync(filePath, 'utf8');
const bundleRenderer = require('vue-server-renderer').createBundleRenderer(code)
module.exports = function (params) {
 return new Promise(function (resolve, reject) {
 bundleRenderer.renderToString(params.data, (err, resultHtml) => { // params.data is the store's initial state. Sent by the asp-prerender-data attribute
  if (err) {
  reject(err.message);
  }
  resolve({
  html: resultHtml,
  globals: {
   __INITIAL_STATE__: params.data // window.__INITIAL_STATE__ will be the initial state of the Vuex store
  }
  });
 });
 });
};

实现 ASP.NET Core 部分

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

Views/_ViewImports.cshtml

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

@addTagHelper "*, Microsoft.AspNetCore.SpaServices"
Home/Index
public IActionResult Index()
{
 var initialMessages = FakeMessageStore.FakeMessages.OrderByDescending(m => m.Date).Take(2);
 var initialValues = new ClientState() {
 Messages = initialMessages,
 LastFetchedMessageDate = initialMessages.Last().Date
 };
 return View(initialValues);
}

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

Vuex store 默认状态：

const store = new Vuex.Store({
 state: { messages: [], lastFetchedMessageDate: -1 },
 // ...
});

ClientState 类：

public class ClientState
{
 [JsonProperty(PropertyName = "messages")]
 public IEnumerable<Message> Messages { get; set; }

 [JsonProperty(PropertyName = "lastFetchedMessageDate")]
 public DateTime LastFetchedMessageDate { get; set; }
}

Index View

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

@model VuejsSSRSample.Models.ClientState
<!-- ... -->
<body>
 <div class="my-app" asp-prerender-module="VueApp/renderOnServer" asp-prerender-data="Model"></div>
 <script src="~/dist/bundle.client.js" asp-append-version="true"></script>
</body>
<!-- ... -->

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

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

http://github.com/mgyongyosi/VuejsSSRSample

总结

以上所述是小编给大家介绍的Vue.js与 ASP.NET Core 服务端渲染功能整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Vue解决移动端弹窗滚动穿透问题

    Vue解决移动端弹窗滚动穿透问题

    这篇文章主要介绍了Vue解决移动端弹窗滚动穿透问题的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2020-12-12
  • vue中的过滤器及其时间格式化问题

    vue中的过滤器及其时间格式化问题

    这篇文章主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-04-04
  • Vue手写dialog组件模态框过程详解

    Vue手写dialog组件模态框过程详解

    这篇文章主要介绍了Vue手写dialog组件模态框过程，dialog组件为模态框，因此应该是固定定位到页面上面的，并且需要留一定的插槽来让使用者自定义显示内容
    2023-02-02
  • Vue-cli3多页面配置详解

    Vue-cli3多页面配置详解

    这篇文章主要介绍了Vue-cli3多页面配置详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue使用关于speak-tss插件的详细介绍及一些配置项

    vue使用关于speak-tss插件的详细介绍及一些配置项

    本文详细介绍了speak-tss插件在Vue3中的使用方法和配置,首先需要下载依赖,然后引入插件,并进行实例化和配置,配置项包括音量、语言、语音、语速、音调等,speak-tss支持多种语言和语音,适用于需要文本语音播报的场景
    2024-09-09
  • vue项目实现减少app.js和vender.js的体积操作

    vue项目实现减少app.js和vender.js的体积操作

    这篇文章主要介绍了vue项目实现减少app.js和vender.js的体积操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue安装依赖npm install过程中报错npm ERR! cb() never called!问题

    vue安装依赖npm install过程中报错npm ERR! cb() nev

    这篇文章主要介绍了vue安装依赖npm install过程中报错npm ERR! cb() never called!问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • 详解10分钟学会vue滚动行为

    详解10分钟学会vue滚动行为

    本篇文章主要介绍了vue滚动行为，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Element-Plus实现动态渲染图标的示例代码

    Element-Plus实现动态渲染图标的示例代码

    在Element-Plus中，我们可以使用component标签来动态渲染组件，本文主要介绍了Element-Plus 实现动态渲染图标教程，具有一定的参考价值，感兴趣的可以了解一下
    2024-03-03
  • Vue table新增、编辑解读

    Vue table新增、编辑解读

    这篇文章主要介绍了Vue table新增、编辑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07

最新评论