当前位置：首页 > VUE

vue首页实现ssr

2026-01-19 07:35:41VUE

Vue 首页实现 SSR（服务端渲染）

SSR（Server-Side Rendering） 是一种在服务器端生成 HTML 并将其发送到客户端的技术，可以提升首屏加载速度和 SEO 优化。以下是实现 Vue 首页 SSR 的详细方法。

使用 Nuxt.js 框架

Nuxt.js 是基于 Vue 的 SSR 框架，简化了 SSR 配置流程。

安装 Nuxt.js：

npx create-nuxt-app my-project

配置 nuxt.config.js：

export default {
  // 配置 SSR 模式
  ssr: true,
  // 其他配置项如路由、插件等
}

创建首页页面：在 pages/index.vue 中编写 Vue 组件，Nuxt 会自动将其渲染为 SSR 页面。

启动开发服务器：

npm run dev

手动配置 Vue SSR

如果需要手动配置 Vue SSR，可以按照以下步骤进行。

安装依赖：

npm install vue vue-server-renderer express

创建服务端入口文件 server.js：

const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('/', (req, res) => {
  const vm = new Vue({
    template: '<div>Hello, SSR!</div>'
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(html)
  })
})

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

启动服务器：

node server.js

结合 Vue Router 和 Vuex

在 SSR 中，Vue Router 和 Vuex 需要特殊处理以确保服务器端和客户端状态一致。

配置 Vue Router：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home }
    ]
  })
}

配置 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export function createStore() {
  return new Vuex.Store({
    state: { /* 初始状态 */ },
    mutations: { /* 状态变更方法 */ }
  })
}

在服务器端渲染时，需要预取数据并填充到 store 中。

静态文件部署

SSR 应用通常需要配合静态文件服务器（如 Nginx）部署。

Nginx 配置示例：

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}