vue配合实现ssr
Vue 实现 SSR 的核心方法
Vue 的服务器端渲染 (SSR) 主要通过官方库 vue-server-renderer 实现。以下是关键实现步骤：
创建通用应用结构
需要将应用拆分为通用代码，避免客户端特有的操作（如 DOM 操作）。创建 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：
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(serverBundle, {
template: fs.readFileSync('./index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
renderer.renderToString({ url: req.url }, (err, html) => {
if (err) return handleError(err)
res.end(html)
})
})客户端激活
创建客户端入口文件 client.js 进行混合：
import { createApp } from './app'
const { app } = createApp()
app.$mount('#app')构建配置要点
Webpack 配置分离 需要分别配置服务器和客户端的 Webpack：
- 服务器配置：
target: 'node'，输出libraryTarget: 'commonjs2' - 客户端配置：正常生成静态资源
路由处理
使用 vue-router 的异步组件时需注意：
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
Promise.all(matchedComponents.map(component => {
return component.asyncData && component.asyncData({ store, route: router.currentRoute })
})).then(() => {
// 渲染完成
})
})性能优化方案
数据预取
在路由组件中定义 asyncData 方法：
export default {
asyncData({ store }) {
return store.dispatch('fetchData')
}
}缓存策略 对渲染结果实施 LRU 缓存：
const microCache = new LRU({
max: 100,
maxAge: 1000 * 60 // 1分钟
})流式渲染 提升首屏性能：
const stream = renderer.renderToStream(context)
stream.pipe(res)常见问题解决
跨平台 API 兼容
使用 isServer 环境变量：
created() {
if (!this.$isServer) {
window.addEventListener('resize', this.handleResize)
}
}状态管理注意 避免直接修改服务端的 store 状态：
if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
store.replaceState(window.__INITIAL_STATE__)
}静态资源处理
使用 vue-meta 管理头部信息：
export default {
metaInfo: {
title: 'SSR Page'
}
}以上方案适用于 Vue 2.x 项目，Vue 3 推荐使用 Vite 的 SSR 插件实现类似功能。实际部署时需配合 Node 服务器或无服务器架构。
