Question

我有一个具有服务器端渲染功能的Vue 2应用程序。现在，我尝试升级到Vue 3，但卡在SSR部分上，因为vue-server-renderer程序包会引发以下错误：

Vue packages version mismatch: - vue@3.0.0 - vue-server-renderer@2.6.12 This may cause things to work incorrectly. Make sure to use the same version for both.

但是没有适用于vue-server-renderer的3.0.0版本...

通过谷歌搜索，我在vue-next存储库上发现了这个问题：https://github.com/vuejs/vue-next/issues/1327

但是对我来说，仍然不清楚如何使用vue版本3实现SSR。已经有可能吗？有示例如何在Vue 3中使用SSR吗？

Answer 1

Vue-server-renderer仅可用于vue版本2。版本3的一大变化是它现在具有SSR支持。

因此，现在不必使用vue-2.0服务器渲染器，而只需使用vue的createSSRApp。在服务器上，要将呈现的应用程序呈现为可以发送到浏览器的字符串，请使用renderToString方法，该方法可以从@vue/server-renderer导入（请注意，您必须单独安装此软件包）。

作为一个超级基础（没有捆绑程序或其他任何东西）的示例，看起来像这样：

const express = require('express');
const { createSSRApp } = require('vue');
const { renderToString } = require('@vue/server-renderer');

const app = express();

const example= {
  template: `
    <div>
      Hello World
    </div>`,
};

function renderVueApp(req, res) {
  const vueApp = createSSRApp(example);

  (async () => {
    const html = await renderToString(vueApp);

    res.send(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://unpkg.com/vue@next"></script>
          <title>About blank</title>
        </head>
        <body>
          <div id="app">${html}</div>
          <script>
            const example = { template: '<div>Hello World</div>}; 
            Vue.createSSRApp(example).mount('#app', true);
          </script>
        </body>
      </html>
    `);
  })();
}

app.get('/', renderVueApp);

const port = process.env.PORT || 8080;
app.listen(port, () =>
  console.log(`Server started at localhost:${port}. Press ctrl+c to quit.`)
);

在前端，您可以让vue接管服务器中的标记，即您可以在水化模式下创建并安装该应用程序。

您在问题中引用的捆绑包渲染器或多或少只是从vue-2.0服务器渲染器中提取的。为了使用它，您将必须使用vue-2.0 server-renderer软件包中的client-plugin和server-plugin并将它们插入您的webpack进程中，以获取服务器捆绑包和客户端清单。

请注意，使用此设置，捆绑包渲染器将仅注入带有rel =“ preload”的条目/初始脚本。目前，“新” vue加载器不会向组件中注入任何组件注册逻辑（就像“旧” vue加载器一样）。尽管如此，vue-bundle-renderer可以并且将使用rel =“ preload”注入异步块，只要它们在ssrContext._registeredComponents中被引用即可。因此，如果您需要在应用程序中使用此功能，则必须自己编写该逻辑。

当然，这是一种方法。我确定还有更多通往相同目的地的道路。

我编写了vue2 hackernews克隆的vue3版本，其中使用了所有已描述的内容。

您可以在这里找到它：https://github.com/raukaute/vue-hackernews-3.0

如何在Vue 3中使用SSR

1 个答案: