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

最新推荐文章于 2024-07-23 16:20:57 发布

何必诗债换酒钱

最新推荐文章于 2024-07-23 16:20:57 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript web前端 Vue 文章标签： vue.js json 前端

本文链接：https://blog.csdn.net/u014395524/article/details/125706787

版权

本文介绍了在vue-cli 3及以上版本中，如何配置和使用axios请求公共文件夹public内的本地JSON文件。vue-cli3改变了静态资源的位置，现在默认存放在public目录下。发起请求时，URL只需指定文件名，vue会自动查找public下的资源。运行成功后，axios将能够顺利获取到JSON数据。

摘要由CSDN通过智能技术生成

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",
  },
});

//