Vue-cli project example of obtaining local json file data

Below I will share with you an example of how the Vue-cli project obtains local json file data. It has a good reference value and I hope it will be helpful to everyone.

In my vue demo project, I want to add some json data locally, write it to a json file, obtain it through an asynchronous request, and then load the data.

axios.get('http://localhost:8080/datas/json')

However, during this process, my access was always 404. After checking, I found that in projects built on vue-cli, only the static directory is exposed by vue-cli. In the static data folder, the pictures I put under static can be accessed normally. I created a new datas directory in the same level directory as static and put the json file into the datas directory. The request is always 404. When I put the json file into static Once in the directory, you can access it normally.

This feature must be remembered:

The static directory is the static folder exposed by vue-cli, and all static data is It should be placed in the static directory! !

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Instance of vue2.0 simulation anchor point

Detailed explanation of vue’s mixins attribute

Solution to the BUG that the page scrolling position remains unchanged after vue2.0 routing switch

The above is the detailed content of Vue-cli project example of obtaining local json file data. For more information, please follow other related articles on the PHP Chinese website!