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

1、vue-ssr/index.template.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-ssr-outlet-->
</body>
</html>

2、vue-ssr/server.js：

// SSR渲染一个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-ssr-outlet-->
  })

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

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

  // 插值：需要转义的数据放在 {{}} 中，不需要转义的数据放在 {{{}}} 中
  const context = {
    title: 'Vue SSR',
    metas: `
      <meta name='keyword' content='vue,ssr'>
      <meta name='description' content='vue ssr 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端口')
})

　　使用fs引入html模板，使用模板时在返回到客户端时就不需要写html壳子

　　在createRender时将引入的模板传入

　　context作为renderToString的第二个参数进行插值，不需要转义的数据用{{}}，需要转义的数据用{{{}}}

原文地址：https://www.cnblogs.com/wuqilang/p/15122971.html