如何使用webpack和vue-cli将服务器端变量发送到vue实例？

问题描述 投票：3回答：1

我目前正在使用vue-cli制作一个项目，该项目通过webpack生成一个Node项目。我可以构建所有脚本并在.vue文件中使用帕格语言。但是，在构建时，项目使用HTML-Webpack-Plugin，它会使用客户端脚本将代码输出为静态HTML。

如何将变量从服务器端传递给这些客户端脚本？我以前使用的是pug，这使此过程变得容易，但是由于它现在已内置到.html文件中，因此无法需要做的更多。

我有两次尝试，均次优：

1。将变量发送到客户端脚本中]

script.
  const clinetSideVar = `!{serverSideVar}`;

这种方法的问题是，我无法将此变量传递给vue实例，因为在构建时会对其进行混淆，而且我无法访问它（或者，我没有找到方法）。

2。使用AJAX请求

我还可以为服务器端站点数据创建一个宁静的API并使用AJAX检索它，但这似乎是一个真正的技巧，并且与仅通过pug模板简单地发送数据相比，这会损失很多性能（ 。1我也是，因为客户端JS必须将数据插入DOM）。

node.js webpack vue.js server-side-rendering vue-cli
1个回答
0
投票

我建议使用JSONP（因为index.html是在Vue-cli中提前构建的。）>

在您的public / index.html

（它是模板）
<head>
    ...
  <script>function getServerData(data) { window.__SERVER_DATA__ = data; }</script>
  <script src="/api/server-data.json?callback=getServerData"></script>
</head>

在您的Node Express路由定义中
const app = express();

// ...

app.get('/api/server-data.json', (req, res) => {
  res.jsonp({
    foo: 'foo',
    bar: 'bar'
  });
});

然后只需从任何Vue组件中访问window.__SERVER_DATA__。>>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.