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

【问题标题】：How to send server-side variables to vue instance using webpack & vue-cli?如何使用 webpack 和 vue-cli 将服务器端变量发送到 vue 实例？
【发布时间】：2018-09-26 11:25:38
【问题描述】：

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

如何将变量从服务器端传递到这些客户端脚本？我之前使用的是 pug，它使这个过程变得简单，但现在它被内置到 .html 文件中，这不能再做。

我有两次尝试，都不是最理想的：

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

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

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

2。使用 AJAX 请求

我还可以为服务器端站点数据创建一个 RESTful API 并使用 AJAX 检索它，但这似乎是一个真正的 hack，与仅通过 pug 模板（使用没有。1 我也是，因为客户端 JS 必须将数据插入 DOM）。

【问题讨论】：

什么是{serverSideVar}？它是一个文件路径还是其他在构建后不会更改的东西？
不，它是一个随web请求发送的变量，这是pug语法

标签： node.js webpack vue.js server-side-rendering vue-cli

【解决方案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__。

【讨论】：