Vue SSR的基本使用

最新推荐文章于 2024-03-04 20:06:35 发布

江呱呱

最新推荐文章于 2024-03-04 20:06:35 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46500485/article/details/109516998

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.安装

npm install vue vue-server-renderer --save

2.尝试在命令行中显示出来在服务器端渲染的元素

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

3.在服务器端使用

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()


//所有的请求都会走这一块代码
server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

4.使用一个页面模板来生成页面

页面模板

<html>

<head>
  <meta charset="UTF-8">
  <meta charset="utf-8" />
  <!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
  <title>{{ title }}</title>

  <!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
  {{{ meta }}}
</head>

<body>
  <!--vue-ssr-outlet-->
</body>

</html>

服务器端

const Vue = require('vue');
const server = require('express')();

const template = require('fs').readFileSync('./index.template.html', 'UTF-8');

const renderer = require('vue-server-renderer').createRenderer({
  template,
});

const context = {
  title: 'vue ssr',
  meta: `
        <meta name="keyword" content="vue,ssr">
        <meta name="description" content="vue srr demo">
    `,
};

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`,
  });

  renderer.renderToString(app, context, (err, html) => {
    // console.log(html);
    if (err) {
      res.status(500).end('Internal Server Error')
      return;
    }
    res.end(html);
  });
})

server.listen(8080);