当前位置：首页 > VUE

vue首页实现ssr

2026-02-19 23:57:59VUE

Vue 首页实现 SSR 的方法

使用 Nuxt.js 框架

Nuxt.js 是基于 Vue 的 SSR 框架，内置 SSR 支持，适合快速实现 Vue 的服务器端渲染。
安装 Nuxt.js 后，默认生成的页面即为 SSR 模式，无需额外配置。
适合需要快速开发且对 SSR 要求不高的场景。

手动配置 Vue SSR

对于需要自定义配置的场景，可以手动配置 Vue SSR。

安装 vue-server-renderer 和 express：

npm install vue-server-renderer express

创建服务器入口文件（如 server.js）：

const express = require('express')
const { createBundleRenderer } = require('vue-server-renderer')
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const template = require('fs').readFileSync('./index.template.html', 'utf-8')

const app = express()
const renderer = createBundleRenderer(serverBundle, { template })

app.get('*', (req, res) => {
  renderer.renderToString({ url: req.url }, (err, html) => {
    if (err) res.status(500).end('Internal Server Error')
    else res.end(html)
  })
})

app.listen(8080)

创建客户端入口文件（如 client.js）：

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

new Vue({
  render: h => h(App)
}).$mount('#app')

配置构建工具

使用 Webpack 分别构建客户端和服务端包。

服务端 Webpack 配置示例：

const { VueLoaderPlugin } = require('vue-loader')
const nodeExternals = require('webpack-node-externals')

module.exports = {
  target: 'node',
  externals: [nodeExternals()],
  output: {
    libraryTarget: 'commonjs2'
  },
  plugins: [new VueLoaderPlugin()]
}

处理数据预取

在 SSR 中，需确保数据在服务器端预先加载。

在组件中定义 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(() => {
  // 渲染处理
})

客户端激活

确保客户端能够接管 SSR 生成的静态标记。

在客户端入口文件中：

const app = new Vue({
  store,
  router,
  render: h => h(App)
})

router.onReady(() => {
  app.$mount('#app')
})

处理静态资源

静态资源需通过 Webpack 的 file-loader 或 url-loader 处理，确保服务器和客户端路径一致。

配置 publicPath：

output: {
  publicPath: '/dist/'
}

处理 SEO 和 Meta 标签

使用 vue-meta 管理页面 meta 信息，确保 SSR 时能正确渲染。

安装 vue-meta：

npm install vue-meta

在入口文件中配置：

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

在组件中定义 meta：

export default {
  metaInfo: {
    title: 'Home Page',
    meta: [{ name: 'description', content: 'Home page description' }]
  }
}

部署 SSR 应用

使用 PM2 或 Docker 部署 Node.js 服务，确保高可用性和负载均衡。

PM2 启动示例：

pm2 start server.js

性能优化

启用缓存策略，如组件级缓存或页面级缓存，减少服务器压力。

配置组件缓存：

const LRU = require('lru-cache')
const renderer = createBundleRenderer(serverBundle, {
  cache: LRU({
    max: 1000,
    maxAge: 1000 * 60 * 15
  })
})

vue首页实现ssr