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

Question

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

如何将变量从服务器端传递给这些客户端脚本？ 我以前使用 pug，这使这个过程变得简单，但由于它现在已内置到.html文件中，因此无法再执行此操作。

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

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

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

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

2. 使用 AJAX 请求

我还可以为服务器端站点数据创建一个安静的 API 并使用 AJAX 检索它，但这似乎是一个真正的黑客攻击，并且仅通过 pug 模板（第 1我也是，因为客户端 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 实例？

问题描述

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

2. 使用 AJAX 请求

1 个解决方案

解决方案1
0 已采纳 2020-04-27 22:04:09

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

问题描述

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

2. 使用 AJAX 请求

1 个解决方案

解决方案1 0 已采纳 2020-04-27 22:04:09

解决方案1
0 已采纳 2020-04-27 22:04:09