在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文件,然后将数据存储在一个响应式变量中,以便在模板中使用。