Question

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

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

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

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

.html

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

2。使用AJAX请求

我还可以为服务器端站点数据创建一个安静的API，并使用AJAX检索它，但这看起来像是一个真正的黑客，这会因为通过一个哈巴狗模板明确地发送数据而失去相当多的性能（不，我也是，因为客户端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＆amp; amp将服务器端变量发送到vue实例VUE-CLI？

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

2。使用AJAX请求

1 个答案: