Vue.js

# 起步

这份指南仍处在活跃更新的状态

# 安装

为了创建一个服务端渲染的应用，我们需要安装 @vue/server-renderer：

npm install @vue/server-renderer
## 或
yarn add @vue/server-renderer
1
2
3

# 注意

  • 推荐使用的 Node.js 版本是 12+。
  • @vue/server-renderer 和 vue 的版本号必须匹配。
  • @vue/server-renderer 依赖一些 Node.js 的原生模块，因此只能用在 Node.js 中。我们未来可以提供一个简单的可运行在其它 JavaScript 运行时中的构建。

# 渲染一个 Vue 应用

和使用 createApp 创建的只有客户端的 Vue 应用不同，创建一个服务端渲染应用需要使用的是 createSSRApp：

const { createSSRApp } = require('vue')

const app = createSSRApp({
  data() {
    return {
      user: 'John Doe'
    }
  },
  template: `<div>Current user is: {{ user }}</div>`
})
1
2
3
4
5
6
7
8
9
10

现在，我们可以使用 renderToString 函数将我们的应用实例渲染为一个字符串。此函数返回一个 Promise 来解析渲染出的 HTML。


 










 

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp({
  data() {
    return {
      user: 'John Doe'
    }
  },
  template: `<div>Current user is: {{ user }}</div>`
})

const appContent = await renderToString(app)
1
2
3
4
5
6
7
8
9
10
11
12
13

# 和服务器集成

在这个示例中我们使用 Express (opens new window) 来运行一个应用：

npm install express
## 或
yarn add express
1
2
3
// sever.js

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')
const server = require('express')()

server.get('*', async (req, res) => {
  const app = createSSRApp({
    data() {
      return {
        user: 'John Doe'
      }
    },
    template: `<div>Current user is: {{ user }}</div>`
  })

  const appContent = await renderToString(app)
  const html = `
  <html>
    <body>
      <h1>My First Heading</h1>
      <div id="app">${appContent}</div>
    </body>
  </html>
  `

  res.end(html)
})

server.listen(8080)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

现在，当运行这段 Node.js 脚本的时候，我们可以在 localhost:8080 看到一个静态的 HTML 页面。然而，这段代码并不是 hydrate 的：Vue 还没有将这段发送自服务器的静态 HTML 转换为响应客户端数据变化的动态 DOM。这部分会被涵盖在客户端 hydration 章节中。

← 编写通用的代码 →