vue2.0+ axios如何读取本地json文件的数据

1、用vue-cli搭建起一个hello-world（名字随意）的工程，不做任何修改。

2、引入Axios。

在入口文件main.ts中引入Axios

import Axios from 'axios'
import VueAxios from 'vue-axios'
……

Vue.use(VueAxios, Axios);

……

3、在public文件夹中添加data.json文件

可能很多同学问题都出在这里，从网上搜索发现很多人说json文件应该放在assets目录或static目录下，但是我的却不行（我的vue版本是^2.6.11），一直报404错误，如果出现这样的问题，不妨跟我一样，把json文件放在public目录下

data.json文件内容

{
    "users": [
        {
            "id": "1",
            "code": "admin",
            "name": "admin",
            "nick": "超级管理员",
            "pwd": "aaaaaa"
        },
        {
            "id": "2",
            "code": "Annie",
            "name": "安妮",
            "nick": "管理员一姐",
            "pwd": "aaaaaa"
        },
        {
            "id": "1",
            "code": "jack002",
            "name": "李力夫",
            "nick": "jjjjj",
            "pwd": "aaaaaa"
        }
    ]
}

4、Home.vue修改调用axios

添加了一个按钮，去调用getUserInfo方法。
methods中添加getUserInfo，去请求data.json本地文件，请求的时候注意，不需要添加public目录名。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <button @click="getUserInfo">获取用户信息</button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

export default Vue.extend({
  name: "Home",
  components: {
    HelloWorld,
  },
  mounted: function () {},
  methods: {
    getUserInfo() {
      this.axios.get("/data.json")
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(res);
        });
    },
  },
});
</script>

5、运行结果