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

Question

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

node.jswebpackvue.jsserver-side-renderingvue-cli

3

我目前正在使用vue-cli创建一个Node项目，其中包括webpack。我可以构建所有脚本并在`.vue`文件中使用pug语言。然而，在构建项目时，会使用`HTML-Webpack-Plugin`输出代码为静态HTML和客户端脚本。 我如何将变量从服务器端传递到这些客户端脚本? 以前我使用的是pug，这使得该过程很容易，但由于它现在被构建为`.html`文件，所以无法再这样做。

我的尝试有两种，但都不太理想:

1. 将变量发送到客户端脚本

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

这种方法的问题在于，当构建时变量被混淆后，我无法将其传递给vue实例，也没有访问它的方式（或者说有吗？我还没有找到方法）。

2.使用AJAX请求

我也可以为服务器端站点数据创建restful API，并使用AJAX检索它，但这似乎是一个真正的hack，相比于仅通过pug模板发送数据（使用第1种方法），这将损失相当多的性能（因为客户端JS必须将数据插入DOM）。

- Post Self

{serverSideVar}是什么？它是一个文件路径还是在构建后不会改变的其他内容？ - Sphinx

不，这是一个随着网络请求发送的变量，这是pug语法。 - Post Self

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- prograhammer · Answer 1

我建议使用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__即可。