vue如何实现ssr
Vue SSR 实现方法
Vue.js 的服务器端渲染（SSR）可以通过官方提供的 vue-server-renderer 库实现。以下是关键步骤：
创建通用入口文件
在 SSR 中需要创建两个入口文件，分别用于客户端和服务器端。客户端入口通常命名为 entry-client.js，服务器端入口为 entry-server.js。
客户端入口示例：
import { createApp } from './app'
const { app, router } = createApp()
router.onReady(() => {
app.$mount('#app')
})服务器端入口示例：
import { createApp } from './app'
export default context => {
return new Promise((resolve, reject) => {
const { app, router } = createApp()
router.push(context.url)
router.onReady(() => {
const matchedComponents = router.getMatchedComponents()
if (!matchedComponents.length) {
return reject({ code: 404 })
}
resolve(app)
}, reject)
})
}配置 Webpack
需要分别配置客户端和服务器的 Webpack 配置。客户端配置与常规 Vue 项目类似，服务器配置需要指定 target: 'node' 和 libraryTarget: 'commonjs2'。
服务器 Webpack 配置示例：
module.exports = {
target: 'node',
entry: './src/entry-server.js',
output: {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
}
// 其他配置...
}创建服务器 使用 Express 或其他 Node.js 框架创建服务器，处理 SSR 请求。
Express 服务器示例：
const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const server = express()
const renderer = createBundleRenderer(serverBundle, {
template,
clientManifest
})
server.get('*', (req, res) => {
const context = { url: req.url }
renderer.renderToString(context, (err, html) => {
if (err) {
if (err.code === 404) {
res.status(404).end('Page not found')
} else {
res.status(500).end('Internal Server Error')
}
} else {
res.end(html)
}
})
})Nuxt.js 简化方案
对于更简单的 SSR 实现，可以使用 Nuxt.js 框架，它内置了 SSR 功能。
安装 Nuxt.js：
npx create-nuxt-app <project-name>配置 nuxt.config.js：
export default {
ssr: true,
// 其他配置...
}创建页面组件：
<template>
<div>
<h1>SSR Page</h1>
</div>
</template>注意事项
SSR 环境下需要注意避免客户端特定代码在服务器端执行，如访问 window 或 document 对象。
使用 process.client 检查客户端环境：
if (process.client) {
// 只在客户端执行的代码
}异步数据获取应使用 asyncData 方法：
export default {
async asyncData({ params }) {
const { data } = await axios.get(`/api/item/${params.id}`)
return { item: data }
}
}
