Question

通过各种教程和指南，我能够使用Webpack获得基本的SSR Vue，问题是我似乎无法将服务器数据/上下文传递给应用程序。我正在使用Vue SSR Renderer的捆绑包渲染器。我的快递/router.js看起来像这样：

const express = require("express");
const fs = require('fs');
const { resolve } = require('path');
const { createBundleRenderer } = require('vue-server-renderer');

const router = express.Router();

const renderer = createRenderer();

router.get('*', (req, res) => {
  const context = { url: req.url };
  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err);
      return res.status(500).end(err.message);
    }
    return res.end(html)
  });
});

function createRenderer() {
  const bundlePath = resolve(__dirname, './dist/server.bundle.js');
  const template = fs.readFileSync('./index.html', 'utf-8');
  return createBundleRenderer(bundlePath, { template }); // https://ssr.vuejs.org/api/#createbundlerenderer
}

module.exports = router;

问题发生时，它消耗了/src/entry.server.js产生的服务器捆绑软件：

import { createApp } from './main.js';

export default context => new Promise((resolve, reject) => {
  const { app } = createApp(context);
  resolve(app);
});

消耗/src/main.js

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

export function createApp(context = {}) {
  const app = new Vue({
    render: h => h(App)
  });

  return { app };
}

在这里，问题是当我尝试将包含的服务器context用作数据属性时，它的计算结果为undefined，我不知道为什么。像这样：

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

export function createApp(context = {}) {
  const app = new Vue({
    render: h => h(App),
    data() {
      return { url: context:url }
    }
  });

  return { app };

我尝试使data成为箭头函数，以防万一这是一个范围问题，但这并不能解决。我尝试将url硬编码为字符串，并且可以正常工作并显示在客户端上，这告诉我问题是context变量未正确发送。vueServerRenderer.bundleRenderer()的API文档做得很差解释如何将数据传递到包中。

我知道这是可以使用Nuxt或Vuex解决的问题，但我实际上是在尝试使事情保持最小化，直到我绝对需要它们时才依赖它们。

有什么想法可以解决这个问题吗？

您可以在此处找到并克隆整个项目，并在其中找到整个webpack服务器和客户端配置：

https://github.com/sgarcia-dev/minimal-vue-ssr-webpack

如何使用vue-ssr-renderer将服务器数据/上下文传递到Webpack生成的Vue SSR应用程序？

0 个答案: