我目前正在使用 vue-cli 创建一个项目，它使用 webpack 生成一个 Node 项目。我可以构建所有脚本并在 .vue 文件中使用哈巴狗语言。不过，在构建时，该项目使用 HTML-Webpack-Plugin，它将代码输出为带有客户端脚本的静态 HTML。
我如何将变量从服务器端传递到这些客户端脚本？我以前使用的是 pug，它使这个过程变得简单，但因为它现在内置在 中。 html 文件，不能再这样做了。
我有两次尝试，都不是最理想的:
1。将变量发送到客户端脚本
script.
const clinetSideVar = `!{serverSideVar}`;
这种方法的问题是我无法将这个变量传递给 vue 实例，因为它在构建时会被混淆，我无法访问它(或者我可以访问它吗？我还没有找到方法)。
2。使用 AJAX 请求
我也可以为服务器端站点数据创建一个 restful API 并使用 AJAX 检索它，但这似乎是一个真正的 hack，并且与仅通过 pug 模板(使用不。1 我也会，因为客户端 JS 必须将数据插入 DOM。
最佳答案
我建议使用 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__。
关于node.js - 如何使用 webpack 和 vue-cli 将服务器端变量发送到 vue 实例？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49862104/