当前位置：首页 > VUE

vue实现ssr

2026-02-10 07:56:31VUE

Vue 实现 SSR（服务端渲染）的方法

Vue 的服务端渲染（SSR）可以通过官方提供的 vue-server-renderer 库实现，以下是具体实现步骤和注意事项。

基本配置

安装必要的依赖包：

npm install vue vue-server-renderer express

创建一个基本的服务端入口文件（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(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Vue SSR</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

server.listen(8080);

结合 Vue 单文件组件

为了支持单文件组件（.vue），需要使用 webpack 打包客户端和服务端代码。

安装额外依赖：

vue实现ssr

npm install webpack webpack-cli vue-loader vue-template-compiler @babel/core @babel/preset-env babel-loader css-loader -D

配置 webpack.server.config.js：

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  target: 'node',
  entry: './src/entry-server.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
};

客户端激活（Hydration）

客户端需要打包独立的入口文件以激活静态 HTML。创建 entry-client.js：

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

const app = new Vue({
  render: h => h(App)
});

app.$mount('#app');

服务端数据预取

在服务端渲染时预取数据，可以通过 asyncData 方法实现。修改 entry-server.js：

vue实现ssr

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 });
      }

      Promise.all(
        matchedComponents.map(Component => {
          if (Component.asyncData) {
            return Component.asyncData({
              store,
              route: router.currentRoute
            });
          }
        })
      ).then(() => {
        context.state = store.state;
        resolve(app);
      }).catch(reject);
    }, reject);
  });
};