Как передать данные / контекст сервера в приложение Vue SSR, созданное в веб-пакете, с помощью vue-ssr-renderer? - PullRequest
Новая
       15

Как передать данные / контекст сервера в приложение Vue SSR, созданное в веб-пакете, с помощью vue-ssr-renderer?

0 голосов
/ 28 июня 2019

Следуя различным учебным пособиям и руководствам, я смог настроить SSR Vue для работы с Webpack, проблема в том, что я не могу передать данные / контекст сервера приложению.Я использую Vue SSR Renderer Bund 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 отправляется неправильно. И документы API vueServerRenderer.bundleRenderer () выполняя плохую работу, объясняя, как передавать данные в пакет.

Я знаю, что это проблема, которая может быть решена с помощью Nuxt или Vuex, но я действительно стараюсь держать вещи минимальными и полагаюсь только на них, покаОни мне абсолютно необходимы

Есть идеи, как мне это решить?

Здесь вы можете найти и клонировать весь проект, а также найти все серверные и клиентские конфигурации веб-пакетов :

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

...