vue axios 如何读取项目下的json文件

在 Vue 项目中,使用 axios 读取本地的 JSON 文件可以通过将 JSON 文件放置在 public 目录中,然后通过 axios 发起请求读取。

步骤:

  1. 将 JSON 文件放置在 public 目录下

    • Vue 项目中的 public 目录是静态资源目录,项目编译后这些文件可以通过 URL 直接访问。
    • 将你的 JSON 文件,比如 data.json,放在 public 目录中。
  2. 使用 axios 读取 JSON 文件

    • 在你的 Vue 组件中,通过 axios 发起 GET 请求来读取 JSON 文件。

示例:

假设你有一个 data.json 文件,内容如下:

bash 复制代码
{
  "name": "John Doe",
  "age": 30,
  "email": "johndoe@example.com"
}

将这个文件放在 public/data.json 目录下。

然后在 Vue 组件中,使用 axios 读取文件:

javascript 复制代码
<template>
  <div>
    <h1>User Info</h1>
    <p>Name: {{ userInfo.name }}</p>
    <p>Age: {{ userInfo.age }}</p>
    <p>Email: {{ userInfo.email }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInfo: {}
    };
  },
  mounted() {
    this.fetchUserData();
  },
  methods: {
    fetchUserData() {
      // 读取 public 目录下的 data.json 文件
      axios.get('/data.json')
        .then(response => {
          this.userInfo = response.data;
        })
        .catch(error => {
          console.error('Error fetching the JSON file:', error);
        });
    }
  }
};
</script>

解释:

  • 文件路径 :因为 public 目录中的文件会映射到根目录,访问 public/data.json 相当于请求 /data.json
  • axios.get('/data.json') :这是对项目根目录下的 data.json 文件发起 GET 请求的方式。

注意事项:

  • 开发环境与生产环境 :在开发环境下,Vue 开发服务器会将 public 目录的内容映射为静态文件路径。在生产环境中,构建后的静态文件也会放置在根目录中。
  • 文件位置 :确保 JSON 文件位于 public 文件夹中,否则无法通过 URL 直接访问项目文件。
相关推荐
遂心_8 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark8 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_8 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy9 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy9 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼9 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子9 小时前
迭代器和生成器
前端·javascript
洋葱头_10 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing10 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人13 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化