vue服務端渲染如何使用html模板

時間 2021-08-13

標籤 html vue express 服務器 app ide url spa server 欄目 HTML 简体版

原文原文鏈接

一、vue-***/index.template.html：html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <title>{{title}}</title>
  {{{metas}}}
</head>
<body>
  <!--vue-***-outlet-->
</body>
</html>

二、vue-***/server.js：vue

// ***渲染一個vue實例

const Vue = require('vue') // commonJS規範引入vue模塊
const VueServerRenderer = require('vue-server-renderer')
const server = require('express')()
const fs = require('fs')

// 建立服務器將結果返回
server.get('*', (req, res) => {
  // 建立一個vue實例
  const app = new Vue({
    data: { url: req.url },
    template: `<div>the url is:{{url}}</div>` // 這裏的內容將會注入到 <!--vue-***-outlet-->
  })

  // fs引入自定義的模板
  const template = fs.readFileSync('./index.template.html', 'utf-8')

  // 建立渲染器
  const renderer = VueServerRenderer.createRenderer({ template })

  // 插值：須要轉義的數據放在 {{}} 中，不須要轉義的數據放在 {{{}}} 中
  const context = {
    title: 'Vue ***',
    metas: `
      <meta name='keyword' content='vue,***'>
      <meta name='description' content='vue *** demo'>
    `
  }

  // renderToString 將vue實例渲染成字符串返回
  renderer.renderToString(app, context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html) // 若是在 createRenderer 時不傳模板，那麼 html 的結果爲 <div data-server-rendered="true">the url is:/aaa/bbb/ccc</div> 須要手動寫html殼子
  })
})

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