全國(guó)咨詢(xún)/投訴熱線(xiàn):400-618-4000

首頁(yè)技術(shù)文章正文

簡(jiǎn)單實(shí)現(xiàn)服務(wù)器端渲染

更新時(shí)間:2021-08-20 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班


服務(wù)端渲染的實(shí)現(xiàn),通常有3種方式,第1種是手動(dòng)進(jìn)行項(xiàng)目的簡(jiǎn)單搭建,第2種是使用vue CLI 3腳手架進(jìn)行搭建,第3種利用一些成熟框架來(lái)搭建(如Nuxt,js),本節(jié)講解第1種和第2種方式,帶領(lǐng)讀者實(shí)現(xiàn)簡(jiǎn)單的服務(wù)器端渲染。

1.創(chuàng)建 vue-ssr項(xiàng)目

在C:\vue\chapter08目錄中,使用命令行工具創(chuàng)建一個(gè)vue-ssr項(xiàng)目,具體命令如下:

mkdir vue-ssr

cd vue-ssr

npm init  -y

執(zhí)行上述命令后,會(huì)在vue-ssr 目錄下生成一個(gè)package.json文件。

在Vue中使用服務(wù)器端渲染,需要借助Vue的擴(kuò)展模塊vue-server-renderer。下面我們?cè)趘ue-ssr項(xiàng)目中使用npm來(lái)安裝vue-server-renderer,具體命令如下:

npm install vue@2.6.x vue-server-renderer@2.6.X --save

vue-server-renderer是Vue中處理服務(wù)器加載的一個(gè)模塊,給Vue提供在Node.js服務(wù)器端渲染的功能。vue-server-renderer依賴(lài)-些Node.js原生模塊,所以目前只能在Node.js中使用。


2.Vue渲染

將vue-server-renderer安裝完成后,創(chuàng)建服務(wù)器腳本文件test.js,實(shí)現(xiàn)將Vue實(shí)例的渲染結(jié)果輸出到控制臺(tái)中,具體代碼如下:

 //①創(chuàng)建一個(gè)Vue實(shí)例

 const Vue = require('vue')

  const app = new Vue({

template: '<div>SSR 的簡(jiǎn)單使用</div>'
//② 創(chuàng)建一個(gè)renderer實(shí)例
const renderer = require ('vue-server-renderer').createRendere()

//③將Vue實(shí)例渲染為HTML

renderer.renderToString(app, (err, html) => {

if (err) {

throw err
}

console.log(html)

})

在命令行中執(zhí)行node test.js,運(yùn)行結(jié)果如下所示:

<div data-server-rendered="true">SSR的簡(jiǎn)單使用</div>

從上述結(jié)果可以看出,在<div>標(biāo)簽中添加了一個(gè)特殊的屬性data-server-rendered,該屬性是告訴客戶(hù)端的Vue這個(gè)標(biāo)簽是由服務(wù)器渲染的。







猜你喜歡:

瀏覽器渲染頁(yè)面的順序:頁(yè)面渲染的過(guò)程介紹

HTML從瀏覽器地址欄輸入U(xiǎn)RL到顯示頁(yè)面的步驟

移動(dòng)端web頁(yè)面如何定義和使用初始化樣式?

黑馬程序員web前端高級(jí)軟件工程師培訓(xùn)

分享到:
在線(xiàn)咨詢(xún) 我要報(bào)名
和我們?cè)诰€(xiàn)交談!