vuejs: the correct path of local json file for axios get request

Question

In my Vue project, I have mocked some data for next step development. I already save the test data in a json file. And my vue project is typical one created with Vue-Cli, and the structure for my project goes as following:

My_project
    build
    config
    data
        service_general_info.json
    node_modules
    src
        components
            component-A
                component-A.vue

as you can see, all the folders are created by the vue-cli originally. And I make a new folder data and place the test data json file inside.

And I want to read in the data by axios library in an event handling function inside the component of component-A as following:

  methods: {
    addData() {
      console.log('add json data...');
      axios.get('./../../data/service_general_info.json');
    },
  },

I use relative path to locate the target file.But get 404 error back. So how to set the path correctly? Currently I am running the dev mode in local host.

The error message is: GET http://localhost:8080/data/service_general_info.json 404 (Not Found)

I'm afraid that you can not use axios like this! This library is for making HTTP requests but it seems you're trying to access file-system instead which won't work as far as I know. — ironcladgeek
– ironcladgeek, Commented Jul 27, 2017 at 11:48

Stephen Rauch · Accepted Answer · 2018-09-27 03:16:18Z

10

In Vue-cli project, axios can't get data from custom folder.

You should use static folder to save test json file.

So you should change axios call like this:

axios.get('/static/service_general_info.json');

This will get data from json.

edited Sep 27, 2018 at 3:16

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Sep 27, 2018 at 3:00

Jin Lin

3013 silver badges7 bronze badges

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

3 Comments

SumNeuron Over a year ago

is the static folder assets ?

Jin Lin Over a year ago

No, static is different from assets.

DarkteK Over a year ago

You saved my life!

Shankar Gurav · Accepted Answer · 2019-06-11 05:10:02Z

6

If you are doing just for sake of testing then you can save it in public folder and access it directly on http root.

e.g. I have the file results.json in public folder then I can access it using http://localhost:8080/results.json

answered Jun 11, 2019 at 5:10

Shankar Gurav

1,0779 silver badges17 bronze badges

3 Comments

gaurav bhavsar Over a year ago

Yes, it is working with local but not with the build on the server.

Shankar Gurav Over a year ago

check build output and adjust url accordingly.

gaurav bhavsar Over a year ago

Issue resolved, server not allowing .json format, just added mimeType in the web.config file and now it's working correctly. Thanks.

Ankur · Accepted Answer · 2019-12-31 05:55:04Z

5

For me it didn't work using static folder. I had to put it in public folder.

I put json folder in public & then accessed it like below.

getCountries() {
    return axios.get('json/country-by-abbreviation.json', { baseURL: window.location.origin })
        .then((response) => { return response.data; })
        .catch((error) => {
            throw error.response.data;
        });
}

answered Dec 31, 2019 at 5:55

Ankur

3,2095 gold badges30 silver badges57 bronze badges

Comments

haykou · Accepted Answer · 2017-08-18 02:41:26Z

2

When the http call is made from the server, axios has no idea that you're on http://localhost:8080, you have to give the full url.

Like this:

methods: {
    addData() {
      console.log('add json data...');
      axios.get('http://localhost:8080/data/service_general_info.json');
    },
  },

answered Aug 18, 2017 at 2:41

haykou

3871 gold badge2 silver badges13 bronze badges

Comments

Dave · Accepted Answer · 2020-08-24 01:41:02Z

2

I had this same issue, only the above solutions wouldn't work as it is being uploaded to a subdirectory. I found I needed to put it in the public/assets folder and use:

axios.get(process.env.BASE_URL+'assets/file.json')

While in vue.config.js I have set the local and live paths

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
    ? '/path/to/app/'
    : '/'
}

answered Aug 24, 2020 at 1:41

Dave

1,4392 gold badges18 silver badges16 bronze badges

Comments

Jebasuthan · Accepted Answer · 2019-06-25 16:20:22Z

-1

You can simply read a static JSON file using import. Then assign in data.

import ServiceInfo from './../../data/service_general_info.json';
export default{
    data(){
        return {
            ServiceInfo
        }
    }
}

answered Jun 25, 2019 at 16:20

Jebasuthan

5,6246 gold badges39 silver badges58 bronze badges

2 Comments

Ohgodwhy Over a year ago

This will never work out of the box as json files do not have an export, therefore you would have to export * from the json file in order for it to work correctly.

user10012 Over a year ago

Actually this works just fine. However it will be processed by webpack.

Collectives™ on Stack Overflow

vuejs: the correct path of local json file for axios get request

6 Answers 6

3 Comments

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related