vue3如何读取本地json文件

在 Vue3 中，可以使用 `axios` 或 `fetch` 等 HTTP 请求库来读取本地 JSON 文件。

以 `axios` 为例，首先需要安装 `axios`：

npm install axios --save

然后在需要读取 JSON 文件的组件中，引入 `axios` 并发起 GET 请求：

import axios from 'axios'

export default {
  data() {
    return {
      jsonData: null
    }
  },
  created() {
    axios.get('/data.json')
      .then(response => {
        this.jsonData = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在上述例子中，`data.json` 是存放在项目根目录下的本地 JSON 文件。`axios.get()` 方法返回一个 Promise 对象，可以使用 `.then()` 处理请求成功的响应结果，使用 `.catch()` 处理请求失败的情况。在成功的情况下，将响应结果赋值给组件的 `jsonData` 数据项。

需要注意的是，在开发环境下，读取本地 JSON 文件的路径为相对于开发服务器的根目录的相对路径，例如 `/data.json` 表示根目录下的 `data.json` 文件。在生产环境下，读取本地 JSON 文件需要使用绝对路径，或者将 JSON 文件打包到静态资源中。

另外，还可以使用 `fetch` 发起 HTTP 请求，例如：

import jsonFile from './data.json'

export default {
  data() {
    return {
      jsonData: null
    }
  },
  created() {
    fetch(jsonFile)
      .then(response => {
        return response.json()
      })
      .then(data => {
        this.jsonData = data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在上述例子中，`data.json` 是通过 `import` 引入的本地 JSON 文件，使用 `fetch()` 方法发起 GET 请求，并使用 `.then()` 处理请求成功的响应结果，使用 `.catch()` 处理请求失败的情况。在成功的情况下，将响应结果赋值给组件的 `jsonData` 数据项。