vue-cli 3 以上的项目使用 axios 请求本地 json 文件

vue-cli 版本：

 在 vue-cli3 中，存放静态资源的位置已经变成存放在 public 文件夹中了（而不是像 vue cli2 一样需要放在static文件夹下）：

发起请求：

import $http from "../../api/request";
...
...

$http("http://localhost:8080/testData.json").then((res) => {
    console.log("testData=" + JSON.stringify(res, null, 2));
});

// requtest.ts
import axios from "axios";

// 创建一个 axios 实例
const $http = axios.create({
  baseURL: "http://localhost:3001/",
  timeout: 60000,
  // withCredentials: true,
  headers: {
    "content-Type": "application/json",
  },
});

// 添加请求拦截器
$http.interceptors.request.use(
  function (config) {
    return config;
  },
  function (error) {
    console.log(error);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
$http.interceptors.response.use(
  // 2xx 范围内的状态码都会触发该函数
  function (response) {
    console.log(response);
    // return response.data;
    return response;
  },
  // 超出 2xx 范围的状态码都会触发该函数
  function (error) {
    console.log(error);
    return Promise.reject(error);
  }
);

export default $http;

注意：请求路径里不需要携带 public/ ，因为在 vue cli3 以上的版本中，只要把那个想请求的文件跟在 localhost:8080 后面，vue 会自动去 public 文件夹下面找这个文件。

运行结果：