Node.js 如何使用Vue SSR渲染器将服务器数据/上下文传递给网页包生成的Vue SSR应用程序?
根据各种教程和指南,我能够使用Webpack获得基本的SSR Vue,问题是我似乎无法将服务器数据/上下文传递到应用程序。我使用的是的包渲染器。我的expressNode.js 如何使用Vue SSR渲染器将服务器数据/上下文传递给网页包生成的Vue SSR应用程序?,node.js,vue.js,webpack,vuejs2,server-side-rendering,Node.js,Vue.js,Webpack,Vuejs2,Server Side Rendering,根据各种教程和指南,我能够使用Webpack获得基本的SSR Vue,问题是我似乎无法将服务器数据/上下文传递到应用程序。我使用的是的包渲染器。我的express/router.js如下所示: const express = require("express"); const fs = require('fs'); const { resolve } = require('path'); const { createBundleRenderer } = require('vue-server-r
/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 };
}
这里的问题是,当我尝试使用包含的服务器上下文
作为数据属性时,它的计算结果是未定义
,我不知道为什么。像这样:
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 };
我尝试将数据
设置为箭头函数,以防出现范围问题,但这并没有解决问题。我尝试将url硬编码为一个字符串,这是有效的,并显示在客户端上,这告诉我问题在于上下文变量没有正确发送。的API文档在解释如何将数据传递到捆绑包方面做得很差
我知道这是一个可以用Nuxt或Vuex解决的问题,但我真的在尽量减少事情的发生,并且只在我绝对需要它们之前依赖它们
有没有办法解决这个问题
您可以在此处找到并克隆整个项目,也可以在此处找到整个网页包服务器和客户端配置: