vue服務端渲染的基本實現

時間 2021-08-13

標籤 html 前端 vue node express npm 瀏覽器服務器 app dom 欄目 HTML 简体版

原文原文鏈接

客戶端渲染：前端去服務端獲取數據，本身生成domhtml

服務端渲染：服務端生成dom返回給前端，有利於seo優化前端

客戶端渲染：vue

服務端渲染：node

利用vue-server-renderer渲染一個vue實例：

一、vue-***文件夾執行 npm init -yexpress

　　安裝所需插件：npm i vue vue-server-renderer expressnpm

二、vue-***/server.js：瀏覽器

// ***渲染一個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>***</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8989, () => {
  console.log('服務器運行在8989端口')
})