vue服務端渲染的基本實現
阿新 • • 發佈：2021-08-10
客戶端渲染：前端去服務端獲取資料，自己生成dom
服務端渲染：服務端生成dom返回給前端，有利於seo優化
客戶端渲染：
服務端渲染：
利用vue-server-renderer渲染一個vue例項：
1、vue-ssr資料夾執行npm init -y
安裝所需外掛：npmivuevue-server-rendererexpress
2、vue-ssr/server.js：
// SSR渲染一個vue例項 const Vue = require('vue') // commonJS規範引入vue模組 const renderer = require('vue-server-renderer').createRenderer() //createRenderer 建立渲染器 const server = require('express')() // 建立伺服器將結果返回 server.get('*', (req, res) => { // 建立一個vue例項 const app = new Vue({ data: { url: req.url }, template: `<div>the url is:{{url}}</div>` }) // renderToString 將vue例項渲染成字串返回 renderer.renderToString(app, (err, html) => {if (err) { res.status(500).end('Internal Server Error') return } res.end(` <!DOCTYPE html> <html lang='en'> <head><title>SSR</title></head> <body>${html}</body> </html> `) }) }) server.listen(8989, () => { console.log('伺服器執行在8989埠') })
3、啟動服務：nodeserver.js
4、瀏覽器訪問localhost:8989/aaa/bbb/ccc
檢視原始碼：