当前位置：首页 > VUE

vue实现ssr

2026-03-27 17:31:50VUE

Vue SSR 实现方法

Vue.js 的服务端渲染（SSR）可以通过官方提供的 vue-server-renderer 库实现。以下是核心实现步骤：

基础项目结构

需要区分客户端和服务端入口文件：

entry-client.js：客户端入口，挂载 Vue 实例到 DOM
entry-server.js：服务端入口，返回渲染的 HTML 字符串
通用 App 组件：App.vue 需为通用代码

服务端配置

安装必要依赖：

npm install vue-server-renderer express

服务端示例代码（Node.js）：

const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const server = express()

// 读取生成的服务器 bundle 文件
const renderer = createBundleRenderer(serverBundle, {
  template: fs.readFileSync('./index.template.html', 'utf-8')
})

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) { /* 错误处理 */ }
    res.end(html)
  })
})

客户端激活

客户端需要特殊处理以复用 SSR 输出的 DOM：

import { createApp } from './app'

const app = createApp()

// 在挂载前判断是否已服务端渲染
if (window.__INITIAL_STATE__) {
  app.$store.replaceState(window.__INITIAL_STATE__)
}

app.$mount('#app')

构建配置

需要分别生成客户端和服务端构建包：

// webpack.server.config.js
module.exports = {
  target: 'node',
  entry: './entry-server.js',
  output: {
    libraryTarget: 'commonjs2'
  }
}

// webpack.client.config.js
module.exports = {
  entry: './entry-client.js'
}

数据预取

在路由组件中定义 asyncData 方法：

export default {
  asyncData({ store }) {
    return store.dispatch('fetchData')
  }
}

服务端渲染时通过匹配路由调用预取方法：

vue实现ssr

const matchedComponents = router.getMatchedComponents()
await Promise.all(
  matchedComponents.map(Component => {
    if (Component.asyncData) {
      return Component.asyncData(store)
    }
  })
)