更新時間:2021-08-20 來源:黑馬程序員 瀏覽量:
服務端渲染的實現(xiàn),通常有3種方式,第1種是手動進行項目的簡單搭建,第2種是使用vue CLI 3腳手架進行搭建,第3種利用一些成熟框架來搭建(如Nuxt,js),本節(jié)講解第1種和第2種方式,帶領讀者實現(xiàn)簡單的服務器端渲染。
1.創(chuàng)建 vue-ssr項目
在C:\vue\chapter08目錄中,使用命令行工具創(chuàng)建一個vue-ssr項目,具體命令如下:
mkdir vue-ssr cd vue-ssr npm init -y
執(zhí)行上述命令后,會在vue-ssr 目錄下生成一個package.json文件。
在Vue中使用服務器端渲染,需要借助Vue的擴展模塊vue-server-renderer。下面我們在vue-ssr項目中使用npm來安裝vue-server-renderer,具體命令如下:
npm install vue@2.6.x vue-server-renderer@2.6.X --save
vue-server-renderer是Vue中處理服務器加載的一個模塊,給Vue提供在Node.js服務器端渲染的功能。vue-server-renderer依賴-些Node.js原生模塊,所以目前只能在Node.js中使用。
2.Vue渲染
將vue-server-renderer安裝完成后,創(chuàng)建服務器腳本文件test.js,實現(xiàn)將Vue實例的渲染結果輸出到控制臺中,具體代碼如下:
//①創(chuàng)建一個Vue實例 const Vue = require('vue') const app = new Vue({ template: '<div>SSR 的簡單使用</div>' //② 創(chuàng)建一個renderer實例 const renderer = require ('vue-server-renderer').createRendere() //③將Vue實例渲染為HTML renderer.renderToString(app, (err, html) => { if (err) { throw err } console.log(html) })
在命令行中執(zhí)行node test.js,運行結果如下所示:
<div data-server-rendered="true">SSR的簡單使用</div>
從上述結果可以看出,在<div>標簽中添加了一個特殊的屬性data-server-rendered,該屬性是告訴客戶端的Vue這個標簽是由服務器渲染的。