实现 vue ssr
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 需分别配置客户端和服务端构建：
// 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'
}生产优化
- 使用
LRU缓存组件渲染结果 - 启用
bundleRenderer的runInNewContext: false选项提升性能 - 通过
shouldPrefetch控制资源预加载
注意事项
- 避免在
beforeCreate/created生命周期中使用浏览器特有 API - 第三方库可能需要特殊处理（如
document相关操作） - 静态资源路径需使用绝对路径
通过以上步骤可实现完整的 Vue SSR 方案，需根据实际项目需求调整具体实现细节。
