Vue3中使用Axios读取本地JSON文件无法显示数据问题排查

1. 先验证JSON文件有效性 #

• 检查JSON语法：有没有漏写引号、多打尾逗号（数组/对象最后一项后面不能加逗号）这类低级错误，直接把JSON内容复制到JSON校验工具里就能查出问题。如果JSON语法错了，Axios解析后会返回null，自然会触发“Cannot read properties of null”。
• 确认文件位置：Vue3项目里，本地JSON必须放在public目录下，src目录里的文件没法通过Axios直接请求，得用import导入。

2. 检查Axios请求逻辑 #

• 核对请求路径：如果JSON在public根目录，路径就写'/文件名.json'，别加../或者绝对路径，比如axios.get('/data.json')。
• 加错误捕获看真实报错：把请求代码改成这样，能看到到底是请求失败还是返回数据有问题：

axios.get('/your-file.json')
  .then(res => {
    console.log('返回数据:', res.data)
    // 先判断数据不为空再赋值
    if (res.data) {
      yourData.value = res.data
    }
  })
  .catch(err => {
    console.error('请求出错:', err.message)
  })

• 别直接访问返回数据的子属性：比如如果res.data是null，你直接写res.data.list肯定报错，必须先判断res.data存在再往下走。

3. Vue模板渲染要做空值判断 #

• 声明响应式变量时初始值设为null或者空对象，比如const yourData = ref(null)。
• 模板里渲染前先判断数据是否存在：

<template>
  <div v-if="yourData">
    {{ yourData.someProperty }}
  </div>
  <div v-else>加载中...</div>
</template>

要是直接写{{ yourData.someProperty }}，数据没加载完或者返回null时必报错。

正确示例参考 #

假设public/data.json内容是：

{
  "items": [
    { "id": 1, "name": "示例1" },
    { "id": 2, "name": "示例2" }
  ]
}

组件代码：

import { ref, onMounted } from 'vue'
import axios from 'axios'

const data = ref(null)

onMounted(() => {
  axios.get('/data.json')
    .then(res => {
      data.value = res.data || {}
    })
    .catch(err => {
      console.error('请求失败:', err)
    })
})

模板：

<template>
  <div>
    <h2>数据列表</h2>
    <ul v-if="data?.items">
      <li v-for="item in data.items" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

内容的提问来源于stack exchange，提问作者chrisjarn