Question

我有一个.json文件，需要在浏览器控制台上显示其数据。我正在使用Vue.js，并使用vue-axios从.json文件中获取数据。这是我在script标记上执行此操作的代码：

<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”文件中，这使我认为这不是路径错误。

Answer 1

您只需要将文件移动到index.html所在的公共目录中，然后执行以下请求：

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

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

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

1 个答案: