使用 vue-axios 在浏览器控制台上显示数据答案

【问题标题】：Display data on the browser console with vue-axios使用 vue-axios 在浏览器控制台上显示数据
【发布时间】：2020-09-12 14:29:06
【问题描述】：

我有一个 .json 文件，我需要在浏览器控制台上显示它的数据。我正在使用 Vue.js 并使用 vue-axios 从 .json 文件中获取数据。这是我在脚本标签上的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
import countries from "./charts/countries.vue";
import axios from "axios";

//const http = axios.create();

export default {
  components: {
    countries
    //languagues
  },
  mounted() {
    axios
      .get("./MOCK_DATA.json")
      .then(Response => window.console.log(Response.data));
  }
};
</script>

我已经尝试过 axios.get(...) 并且我也尝试过设置一个变量 http，它在“导出默认值”上方注释并使用它，而不是“axios.get(...)” .我在浏览器控制台上不断收到同样的错误：

Failed to load resource: the server responded with a status of 404 (Not Found) :8080/MOCK_DATA.json:1
createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:61)

P.S.：我正在使用的文件是 App.vue，它位于“src”文件夹以及“MOCK_DATA.json”文件中，这让我相信这不是路径错误。

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

您只需将文件移动到 index.html 所在的公共目录并执行此请求：

    axios
      .get("/MOCK_DATA.json") //Without dot
      .then(Response => window.console.log(Response.data));

这是因为 Vue 开发服务器在那些目录中查找文件。

【讨论】：