axios请求本地json报错404

1.方法一

使用vue cli老版本创建的vue项目

1.在vue项目根目录下的static目录下创建json文件。例如：data.json
2.在test.vue中获取本地json数据
 
  import axios from 'axios'
 
  export default {
    name: "index",
    data() {
      return {};
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        axios.get('/data.json').then(res => {
          console.log(res)
        })
      }
    },

注意：可以我们画页面时候用本地的mock数据或者json串 以便于后端接口写完的时候我们直接替换一下就可以了 剩下了好多时间 提前做好准备。

使用vue cli3 创建的vue项目

1.在vue项目根目录下的public(等同于旧版的static)目录下创建json文件。例如：data.json
2.在test.vue中获取本地json数据
 
  import axios from 'axios'
 
  export default {
    name: "index",
    data() {
      return {};
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        axios.get('/data.json').then(res => {
          console.log(res)
        })
      }
    },
  };

获取方法

其实就是用模拟get请求的方法拿到json文件，然后再解析，但是在这之前我们需要对请求头做一下处理，否则拿不到文件

const newInstance = this.$ajax.create({
                        baseURL: '',
                        timeout: 5000,
                        headers: {'Content-type': 'multipart/form-data'}
                    });

然后就直接根据get请求获取到我们需要的json文件

            /*../../请根据自己的实际路径来获取*/
            newInstance.get('./../../static/json/guanzhou.json').then(res => {
                console.log("获取本地的json文件" + JSON.stringify(res));
            })

post怎么设置，再补充下POST请求：

老版本：

apiRoutes.post('/foods', function (req, res) { //注意这里改为post就可以了
  res.json({
    errno: 0,
    data: foods
  });
})

新版本：

app.post('/api/foods', function (req, res) { // 注意这里改为post就可以了
  res.json({
    errno: 0,
    data: foods
  });
})

在组件里面：

created () {
 this.$http.post('http://localhost:8080/api/foods').then((response) => {
  console.log(response)
 })
}