Vue.js组件开发-如何实现SRR（服务器端渲染）简单示例

‌

在Vue.js中，实现服务器端渲染（Server-Side Rendering, SSR）需要使用vue-server-renderer库，并结合一个服务器框架，如Express.js。简单的示例来展示如何使用vue-server-renderer在Express服务器上实现Vue组件的SSR。

首先，确保已经安装了必要的依赖：

npm install vue vue-server-renderer express

接下来，创建一个简单的Vue组件，一个Express服务器，以及使用vue-server-renderer来渲染这个组件。

‌1. 创建Vue组件‌

在一个新的文件中（例如App.vue），定义一个简单的Vue组件：

<template>
  <div id="app">
    <h1>Hello, SSR!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 样式可以省略或根据需要添加 */
</style>

‌2. 创建服务器并配置SSR‌

在一个新的JavaScript文件中（例如server.js），设置Express服务器和Vue的SSR：

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

// 读取并编译Vue组件
const resolve = file => path.resolve(__dirname, file);
const app = new Vue({
  template: fs.readFileSync(resolve('./App.vue'), 'utf-8')
});

// 处理所有请求
server.get('*', (req, res) => {
  renderer.renderToString(app, (err, html) => {
    if (err) {
      console.error(err);
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Vue SSR Example</title>
        </head>
        <body>${html}</body>
      </html>
    `);
  });
});

// 启动服务器
server.listen(8080, () => {
  console.log('Server is running on http://localhost:8080');
});

3. 运行服务器‌

在终端中运行以下命令来启动服务器：

node server.js

打开浏览器并访问http://localhost:8080，你应该会看到页面上显示了“Hello, SSR!”。

Vue.js组件开发-如何实现SRR（服务器端渲染）简单示例

首先，确保已经安装了必要的依赖：

‌1. 创建Vue组件‌

‌2. 创建服务器并配置SSR‌

3. 运行服务器‌

悦读