实现 vue ssr
Vue SSR 实现方法
Vue SSR（Server-Side Rendering）允许在服务器端渲染 Vue 应用，提升首屏加载速度和 SEO 友好性。以下是实现 Vue SSR 的核心步骤：
基础配置
安装必要依赖：
npm install vue vue-server-renderer express -S创建服务器入口文件（server.js）：
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: { url: req.url },
template: `<div>访问的 URL 是： {{ url }}</div>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(html)
})
})
server.listen(8080)项目结构优化
典型 SSR 项目结构：
src/
├── components/
├── App.vue
├── app.js # 通用入口
├── entry-client.js # 客户端入口
└── entry-server.js # 服务器入口创建通用应用实例（app.js）：
import Vue from 'vue'
import App from './App.vue'
export function createApp() {
const app = new Vue({
render: h => h(App)
})
return { app }
}客户端激活
客户端入口（entry-client.js）：
import { createApp } from './app'
const { app } = createApp()
app.$mount('#app')服务器入口（entry-server.js）：
import { createApp } from './app'
export default context => {
const { app } = createApp()
return app
}Webpack 配置
需要分别配置客户端和服务器的 Webpack 构建：
// webpack.server.config.js
module.exports = {
target: 'node',
output: {
libraryTarget: 'commonjs2'
}
}
// webpack.client.config.js
module.exports = {
entry: './src/entry-client.js'
}数据预取
在组件中添加 asyncData 方法：
export default {
asyncData({ store, route }) {
return store.dispatch('fetchData', route.params.id)
}
}服务器端数据预取：
// 在 entry-server.js 中
Promise.all(matchedComponents.map(Component => {
if (Component.asyncData) {
return Component.asyncData({
store,
route: router.currentRoute
})
}
})).then(() => {
// 渲染完成后将状态注入到 HTML
context.state = store.state
resolve(app)
})生产部署
使用 vue-server-renderer 的 bundle renderer：
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(serverBundle, {
template,
clientManifest
})注意事项
- 避免在
beforeCreate和created生命周期中使用浏览器特有 API - 使用
v-if而不是v-show进行条件渲染 - 路由模式应使用
history模式 - 所有自定义指令在 SSR 环境下需要特殊处理
通过以上步骤可以实现基本的 Vue SSR 应用。对于更复杂的场景，建议使用 Nuxt.js 等现成框架简化开发流程。
