vue3怎么读取本地json数据

在Vue 3中，可以使用fetch API或其他HTTP客户端来读取本地JSON数据。以下是一个使用fetch的示例：

<template>
  <div>
    <h1>本地JSON数据</h1>
    <div v-if="data">
      {{ data }}
    </div>
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const data = ref(null);
 
    const fetchLocalJson = async () => {
      try {
        const response = await fetch('path/to/your/local.json');
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        data.value = await response.json();
      } catch (error) {
        console.error('Fetch error:', error);
      }
    };
 
    onMounted(() => {
      fetchLocalJson();
    });
 
    return {
      data,
    };
  },
};
</script>

确保将path/to/your/local.json替换为你的本地JSON文件的实际路径。这段代码使用了Vue 3的Composition API，在组件被挂载时，它会尝试获取并解析本地JSON文件，然后将数据存储在一个响应式变量中，以便在模板中使用。