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

Question

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

我如何将变量从服务器端传递到这些客户端脚本？我以前使用的是 pug，这使得这个过程很容易，但现在它已经构建好了到 .html 个文件中，不能再这样做了。

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

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

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

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

2。使用 AJAX 请求

我也可以为服务器端站点数据制作一个 restful API 并使用 AJAX 检索它，但这似乎是一个真正的 hack，这会损失很多性能优于仅通过哈巴狗模板简单地发送数据（我也没有，因为客户端 JS 必须将数据插入 DOM）。

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__。

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

How to send server-side variables to vue instance using webpack & vue-cli?

node.js

webpack

vue.js

server-side-rendering

vue-cli

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

2。使用 AJAX 请求