当前位置：首页 > VUE

实现 vue ssr

2026-01-07 07:41:18VUE

Vue SSR 实现方法

Vue SSR（Server-Side Rendering）通过服务器端渲染 Vue 应用，提升首屏加载速度和 SEO 友好性。以下是核心实现方法：

基础配置

安装必要依赖：

npm install vue vue-server-renderer express

创建基础服务器文件（server.js）：

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

// 创建渲染器
const renderer = createRenderer({
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})

app.get('*', (req, res) => {
  const context = { url: req.url }
  const app = new Vue({ /* Vue 实例配置 */ })

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

app.listen(3000)

客户端激活

创建客户端入口文件（client-entry.js）：

import { createApp } from './app'

const { app } = createApp()
app.$mount('#app')

服务端需返回包含客户端脚本的 HTML：

<!-- index.template.html -->
<div id="app">{{{ app }}}</div>
<script src="/dist/client-bundle.js"></script>

路由处理

使用 vue-router 实现同构路由：

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [/* 路由配置 */]
  })
}

服务端路由匹配：

router.onReady(() => {
  const matchedComponents = router.getMatchedComponents()
  if (!matchedComponents.length) return reject({ code: 404 })
  resolve(app)
})

数据预取

使用 vuex 进行服务端数据预取：

// store.js
export function createStore() {
  return new Vuex.Store({
    actions: {
      fetchData({ commit }) {
        return api.getData().then(data => commit('SET_DATA', data))
      }
    }
  })
}

组件内定义静态方法 asyncData：

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

服务端渲染前调用：

const matchedComponents = router.getMatchedComponents()
Promise.all(
  matchedComponents.map(Component => {
    if (Component.asyncData) {
      return Component.asyncData(store)
    }
  })
).then(() => {
  renderer.renderToString(app, (err, html) => {/* ... */})
})

构建配置

Webpack 需分别配置客户端和服务端构建：

实现 vue ssr

// webpack.client.config.js
entry: './client-entry.js',
output: {
  path: path.resolve(__dirname, './dist'),
  filename: 'client-bundle.js'
}

// webpack.server.config.js
target: 'node',
entry: './server-entry.js',
output: {
  libraryTarget: 'commonjs2',
  filename: 'server-bundle.js'
}