本文實例講述了vue服務端渲染操作。分享給大家供大家參考，具體如下：
想到要學習vue-ssr的同學，自不必多說，一定是熟悉了vue，并且多多少少做過幾個項目。然后學習vue服務端渲染無非解決首屏渲染的白屏問題以及SEO友好。
話不多說，筆者也是研究多日才搞明白這個服務端渲染到底是雜么回事?。。?/p>
一，首先實現下官網的基本案例
隨便建一個目錄，然后執行npm init初始化項目，生成工程文件package.json；創建server.js；然后按照vue-ssr官方鏈接：https://ssr.vuejs.org/zh/basic.html教程里面介紹的server.js，復制教程里面代碼，如下
const Vue = require('vue')const server = require('express')()const renderer = require('vue-server-renderer').createRenderer()server.get('*', (req, res) => { const app = new Vue({ data: { url: req.url }, template: `<div>訪問的 URL 是： {{ url }}</div>` }) renderer.renderToString(app, (err, html) => { if (err) { res.status(500).end('Internal Server Error') return } res.end(` <!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body>${html}</body> </html> `) })})server.listen(8080)顯然需要按照上面引入的依賴vue，express和vue-server-renderer，安裝完畢，在終端執行，node server.js，打開瀏覽器，http://localhost:8080/，不出意外會是亂碼，因為官網的返回的html字符串里面沒有 <meta charset="utf-8">，而加上這個 就好了。
當然還可以引入一個模板文件，同樣是官網的案例，此時的server.js為
const Vue = require('vue')const server = require('express')()const renderer = require('vue-server-renderer').createRenderer({ template: require('fs').readFileSync('./index.template.html', 'utf-8')})server.get('*', (req, res) => { const app = new Vue({ data: { url: req.url }, template: `<div>訪問的 URL 是： {{ url }}</div>` }) renderer.renderToString(app, (err, html) => { if (err) { res.status(500).end('Internal Server Error') return } res.end(html) })})server.listen(8080)模板文件index.template.html
<!DOCTYPE html><html lang="en"> <head><title>Hello</title></head> <body> <!-- 下面這個注釋必須有 --> <!--vue-ssr-outlet--> </body></html>
上面注釋根據官網教程，是vue注入的位置標記。然后同樣執行，node server.js就可以了。
是不是很簡單，還可以創建一個對象來改變模板的標題和meta，這個時候的server.js和模板文件代碼分別是
const Vue = require('vue')const server = require('express')()const renderer = require('vue-server-renderer').createRenderer({ template: require('fs').readFileSync('./index.template.html', 'utf-8')})server.get('*', (req, res) => { const context = { title: 'hello', meta: ` <meta ...> <meta ...> `,url:req.url } const app = new Vue({ data: { url: req.url }, template: `<div>訪問的 URL 是： {{ url }}</div>` }) renderer.renderToString(app, context,(err, html) => { if (err) { res.status(500).end('Internal Server Error') return } res.end(html) })})server.listen(8080)
新聞熱點
疑難解答
圖片精選
