如何将服务器端 JSON 传递/导入到 vue 应用程序？答案

【问题标题】：How to pass/import server-side JSON to a vue app?如何将服务器端 JSON 传递/导入到 vue 应用程序？
【发布时间】：2021-04-06 04:50:34
【问题描述】：

我正在构建一个需要 JSON 文件作为数据的 web 应用程序。在他们的网站上使用我的应用程序的人应该能够传入托管在他们服务器上的 JSON 文件，以便我的应用程序可以读取它。

在开发中，我只使用了import mydata from "./mydata.json"，但这在生产中不起作用。我试图有一个返回require (this.publicPath + this.datapath) 的计算属性（其中this.publicPath 是process.env.BASE_URL，但它无法找到该文件（如果它相关，我正在使用vue-cli 构建）。

我的应用程序的结构是我有一个包装器App.vue，然后是主组件main-component.vue（这样我就可以将包含数据的道具传递给主组件）。

最好的方法是什么？我尝试在index.html 中使用<script> 标记，但显然那是带有JSON 的not supported。我不想使用像 jQuery 这样的其他库。

（我想我可以让用户通过创建一个新的 Vue 组件/应用程序来使用 ES6 语法导入他们的文件，但我不确定如何在纯 HTML 中做到这一点）。

【问题讨论】：

标签： javascript html json vue.js

【解决方案1】：

作为我评论的扩展：您正在寻找的是使用 XMLHttpRequest 从您的服务器实际获取 JSON。您可以使用 Fetch API 以现代的 ES6 方式执行此操作：

fetch('/path/to/your/json')
  .then(resp => resp.json())
  .then(data => {
    // Access the parsed JSON as `data`
    console.log(data);
  });

【讨论】：

谢谢。我在创建的方法中使用了await，因为我需要强制同步行为

【解决方案2】：

如果您可以尝试使用可行的 .js 文件，并且可以像在 .json 文件中一样构造数据，毕竟 json 只是一个 js 对象，我在做同样的事情时也遇到了这个问题. 免责声明：如果可能的话，您可能必须将数据重组为导出变量，如下所示：

export const myObj = {你的 json}

【讨论】：