在前端使用 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> <p class="my-app" asp-prerender-module="VueApp/renderOnServer" asp-prerender-data="Model"></p> <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
#相關推薦：
Diy頁面服務端渲染解決方案_html/css_WEB-ITnose
#以上是Vue.js與 ASP.NET Core 服務端渲染功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
