如何使用 webpack 和 vue-cli 将服务器端变量发送到 vue 实例？
Posted
技术标签:
【中文标题】如何使用 webpack 和 vue-cli 将服务器端变量发送到 vue 实例？【英文标题】：How to send server-side variables to vue instance using webpack & vue-cli? 【发布时间】：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语法
【参考方案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 实例？的主要内容，如果未能解决你的问题，请参考以下文章
vue-cli3 chainWebpack如何修改webpack内部配置
vue-loader：如何在 webpack 4 和 vue-cli3 中使用 vue-loader v15