服务端渲染

https://ssr.vuejs.org/guide/universal.html#data-reactivity-on-the-server
npm install vue vue-server-renderer —save

  1. // Step 1: Create a Vue instance
  2. const Vue = require('vue')
  3. const app = new Vue({
  4.   data: function () {
  5.     return {
  6.       message: 'Hello World'
  7.     }
  8.   },
  9.   template: `<div>{{message}}</div>`
  10. })
  12. // Step 2: Create a renderer
  13. const renderer = require('vue-server-renderer').createRenderer()
  15. // Step 3: Render the Vue instance to HTML
  16. renderer.renderToString(app, (err, html) => {
  17.   if (err) throw err
  18.   console.log('renderToString:', html)
  19.   // => <div data-server-rendered="true">Hello World</div>
  20. })
  22. // in 2.5.0+, returns a Promise if no callback is passed:
  23. renderer.renderToString(app).then(html => {
  24.   console.log('renderToString 2.5.0+:', html)
  25. }).catch(err => {
  26.   console.error(err)
  27. })
  1. <!-- index.template.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <!-- 非 HTML 转译 -->
  6.     <title>{{ title }}</title>
  7.     <!-- HTML 转译 -->
  8.     {{{ mate }}}
  9.   </head>
  10.   <body>
  11.     <!--vue-ssr-outlet-->
  12.   </body>
  13. </html>
  1. const Vue = require('vue')
  2. const server = require('express')()
  3. const serverRenderer = require('vue-server-renderer')
  5. const renderer = serverRenderer.createRenderer({
  6.   template: require('fs').readFileSync('./index.template.html', 'utf-8')
  7. })
  9. const context = {
  10.   title: 'vue ssr',
  11.   mate: `
  12.     <meta charset="utf-8" />
  13.   `
  14. };
  16. server.get('*', (req, res) => {
  17.   const app = new Vue({
  18.     data: {
  19.       url: req.url
  20.     },
  21.     template: `<div @click="test">The visited URL is: {{ url }}</div>`,
  22.     methods: {
  23.       test() { // 服务端渲染后，在客户端没有效果
  24.         console.log('999')
  25.       }
  26.     }
  27.   })
  29.   serverRenderer.createRenderer().renderToString(app).then(html => {
  30.     context.app = html;
  31.     renderer.renderToString(app, context, (err, html) => {
  32.       if (err) {
  33.         res.status(500).end('Internal Server Error')
  34.         return
  35.       }
  36.       res.end(html)
  37.     })
  38.   }).catch(err => {
  39.     console.error(err)
  40.   })
  41. })
  43. server.listen(8088)
  1. {
  2.   "name": "vue-server-renderer-demo",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "author": "",
  10.   "license": "ISC",
  11.   "dependencies": {
  12.     "express": "^4.17.1",
  13.     "vue": "^2.6.14",
  14.     "vue-server-renderer": "^2.6.14"
  15.   }
  16. }