vue-ssr-renderer를 사용하여 웹 팩에서 생성된 Vue SSR 응용 프로그램에 서버 데이터/콘텍스트를 전달하려면 어떻게 해야 합니까?

vue-ssr-renderer를 사용하여 웹 팩에서 생성된 Vue SSR 응용 프로그램에 서버 데이터/콘텍스트를 전달하려면 어떻게 해야 합니까?

다양한 튜토리얼과 가이드에 따라 Webpack을 사용하는 기본적인 SSR Vue를 얻을 수 있었습니다.문제는 서버 데이터/콘텍스트를 앱에 전달할 수 없는 것 같다는 것입니다.Vue SSR 렌더러 번들 렌더러 사용 중입니다.마이 익스프레스/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를 사용하여 해결할 수 있는 문제라는 것을 알지만, 저는 정말 최소한의 상태로 유지하려고 노력하고 있으며, 꼭 필요할 때까지만 믿고 있습니다.

이 문제를 어떻게 해결할 수 있을까요?

여기서 프로젝트 전체를 검색 및 복제하고 웹 팩 서버와 클라이언트 구성 전체를 검색할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/56811376/how-to-pass-server-data-context-to-a-webpack-generated-vue-ssr-application-using