vue服务端渲染

作者：平凡中的不凡发布日期:2025-03-24 浏览:61

// Vue 服务端渲染 (Server-Side Rendering, SSR) 示例代码

// 安装依赖
// npm install vue vue-server-renderer express

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, () => {
  console.log('服务器正在运行在 http://localhost:8080');
});

解释说明：

安装依赖：首先需要安装 vue、vue-server-renderer 和 express，这些是实现 Vue SSR 所需的核心库。
创建 Express 服务器：使用 express 创建一个简单的 HTTP 服务器。
创建 Vue 实例：根据请求的 URL 动态创建 Vue 实例。
渲染模板：通过 renderer.renderToString 方法将 Vue 实例转换为 HTML 字符串。
返回响应：将生成的 HTML 返回给客户端。

这个示例展示了如何使用 Vue 进行服务端渲染的基本流程。

上一篇：vue项目搭建

下一篇：vue const