当前位置：首页 > VUE

vue的ssr怎么实现

2026-02-24 01:26:38VUE

Vue SSR 实现方法

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

安装依赖 需要安装 vue、vue-server-renderer 和 express（或其他 Node.js 框架）：

npm install vue vue-server-renderer express

创建 Vue 实例 服务端和客户端需要共享同一个 Vue 实例，通常使用工厂函数避免状态污染：

// app.js
import Vue from 'vue'
import App from './App.vue'

export function createApp() {
  const app = new Vue({
    render: h => h(App)
  })
  return { app }
}

服务端入口 使用 createRenderer 生成 HTML 字符串：

vue的ssr怎么实现

// server-entry.js
import { createApp } from './app'
import renderer from 'vue-server-renderer'

const renderer = createRenderer()

server.get('*', (req, res) => {
  const { app } = createApp()
  renderer.renderToString(app, (err, html) => {
    if (err) res.status(500).end('Internal Server Error')
    res.end(`
      <!DOCTYPE html>
      <html>
        <head><title>SSR</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

客户端激活 客户端需要挂载应用以实现交互：

// client-entry.js
import { createApp } from './app'

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

构建配置

服务端配置 需要设置 target: 'node' 和 libraryTarget: 'commonjs2'：

vue的ssr怎么实现

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

客户端配置 普通 SPA 配置即可，但需要与服务器 bundle 同步：

// webpack.client.config.js
module.exports = {
  // 标准配置
}

数据预取

异步数据获取 在组件中定义 asyncData 方法：

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

服务端数据预取 在渲染前获取所有匹配组件的异步数据：

// server-entry.js
const matchedComponents = router.getMatchedComponents()
Promise.all(
  matchedComponents.map(Component => {
    if (Component.asyncData) {
      return Component.asyncData({ store })
    }
  })
).then(() => {
  // 渲染处理
})