当前位置： 技术文章>> Vue.js 的服务端渲染（SSR）如何配置？

文章标题：Vue.js 的服务端渲染（SSR）如何配置？
  • 文章分类: 后端
  • 4809 阅读
文章标签: vue vue基础

Vue.js 的服务端渲染（SSR）配置可以通过多种方式实现，但最常用的方法之一是使用 Vue 官方提供的 vue-server-renderer 包。这个包允许你以 Node.js 服务器的形式来渲染 Vue 组件为 HTML 字符串，然后将这些字符串发送到客户端。以下是一个基本的配置步骤，介绍如何使用 vue-server-renderer 和 express（一个流行的 Node.js web 应用框架）来设置 Vue.js 的服务端渲染。

步骤 1: 初始化项目和安装依赖

首先，你需要有一个 Node.js 环境。然后，创建一个新的项目文件夹，并初始化一个新的 Node.js 项目：

mkdir my-vue-ssr-app
cd my-vue-ssr-app
npm init -y

安装 Vue.js 及相关依赖：

npm install vue vue-server-renderer express

步骤 2: 创建 Vue 应用

在项目根目录下创建一个 src 文件夹，并在其中创建一个 app.js 文件。这个文件将包含你的 Vue 应用配置：

// src/app.js
import Vue from 'vue';

export function createApp() {
  const App = {
    data() {
      return {
        message: 'Hello Vue SSR!'
      }
    },
    render(h) {
      return h('div', this.message);
    }
  };

  const app = new Vue(App);

  return app;
}

步骤 3: 设置服务端渲染

在根目录下创建一个 server.js 文件，用于设置服务器和渲染 Vue 应用：

// server.js
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const fs = require('fs');
const path = require('path');

const app = express();

// 生产环境时加载预编译的服务器捆绑包
const serverBundle = require('./dist/vue-ssr-server-bundle.json');
const clientManifest = require('./dist/vue-ssr-client-manifest.json');

const renderer = createBundleRenderer(serverBundle, {
  clientManifest,
  runInNewContext: false
});

app.get('*', (req, res) => {
  renderer.renderToString((err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('404 | Page Not Found');
      } else {
        res.status(500).end('500 | Internal Server Error');
      }
      return;
    }
    res.end(html);
  });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

注意：上述代码示例中直接使用了 vue-ssr-server-bundle.json 和 vue-ssr-client-manifest.json 文件，这些文件是通过 Webpack 打包生成的。你需要使用 Webpack 及其相关插件（如 vue-server-renderer/client-plugin 和 vue-server-renderer/server-plugin）来生成这些文件。

步骤 4: 配置 Webpack

由于 Webpack 配置相对复杂，这里不详细展开。你需要为客户端和服务端分别配置 Webpack，确保它们可以正确地打包你的 Vue 应用。这通常涉及到设置多个入口点、配置 loader、插件等。

步骤 5: 运行你的应用

在配置好 Webpack 并生成了必要的文件后，你可以通过运行 node server.js 来启动你的 Node.js 服务器，并通过浏览器访问你的 Vue 应用。

注意事项

  • 服务端渲染需要处理更复杂的状态管理和路由同步问题。
  • 使用服务端渲染时，需要关注 SEO 优化和性能优化。
  • Vue.js 的服务端渲染配置可能会随着 Vue 版本和依赖库的更新而变化，请确保查看最新的官方文档和指南。
推荐文章