How do I make an axios request to a local JSON file in my Vue project

Question

I have a JSON file in my Vue JS project, nested in the folder structure

src/assets/json/people.json

I'm trying to make an axios request to the json resource in my App.vue file

export default {
  name: "App",
  data: function() {
    return {
      people: []
    }
  },
  created: function() {
    this.fetchPeople();
  },
  methods: {
    fetchPeople: function() {
      let url = "./src/assets/json/people.json"
      axios.get(url)
      .then(res => {
       this.people = JSON.parse(res);
      })
    }
  }
};

On my console, I'm getting the error below:

Failed to load resource: the server responded with a status of 404 (Not Found)
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:59)

Naor Levi · Accepted Answer · 2019-12-23 13:32:22Z

2

Why would you that?

import people from "./src/assets/json/people.json"

would probably do the work.

Axios is an HTTP agent to fetch data from a remote server. If the file is local, just import it.

answered Dec 23, 2019 at 13:32

Naor Levi

1,8211 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I make an axios request to a local JSON file in my Vue project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related