Vue3 中如何配置请求本地 JSON 数据

在 Vue3 中，您可以使用以下方法之一来配置请求本地 JSON 数据：

1. 使用 axios 库：
   axios 是一个流行的 HTTP 客户端库，可用于发送请求和接收响应。您可以使用 axios 在 Vue3 中请求本地 JSON 数据。首先，您需要安装 axios 库，然后使用它来发送 GET 请求并处理响应。

   npm install axios

   import axios from 'axios';
   export default {
   data() {
   return {
   data: null,
   };
   },
   async created() {
   try {
   const response = await axios.get('./data.json');
   this.data = response.data;
   } catch (error) {
   console.error(error);
   }
   },
   };

   在上面的示例中，我们使用 axios.get 方法发送 GET 请求来获取本地 JSON 文件（./data.json），并将响应数据存储在组件的 data 属性中。请确保将本地 JSON 文件的路径替换为您实际的文件路径。
2. 使用 fetch API：
   fetch API 是浏览器内置的用于发送网络请求的 API。您可以使用 fetch API 在 Vue3 中请求本地 JSON 数据。以下是一个示例：

   export default {
   data() {
   return {
   data: null,
   };
   },
   async created() {
   try {
   const response = await fetch('./data.json');
   const data = await response.json();
   this.data = data;
   } catch (error) {
   console.error(error);
   }
   },
   };

   在上面的示例中，我们使用 fetch 方法发送 GET 请求来获取本地 JSON 文件（./data.json），然后使用 response.json 方法将响应解析为 JSON 对象，并将其存储在组件的 data 属性中。同样，请确保将本地 JSON 文件的路径替换为您实际的文件路径。
3. 使用 vue-resource：
   vue-resource 是 Vue 的官方 HTTP 客户端插件，可用于发送网络请求。虽然 vue-resource 主要针对的是远程请求，但您也可以使用它来请求本地 JSON 数据。首先，您需要安装 vue-resource：

   npm install vue-resource@next --save

   然后，您可以在 Vue3 组件中使用 vue-resource 来请求本地 JSON 数据：

   import Vue from 'vue';
   import VueResource from 'vue-resource';
   Vue.use(VueResource);
   export default {
   data() {
   return {
   data: null,
   };
   },
   async created() {
   try {
   const response = await this.$http.get('./data.json'); // 使用 $http 发送 GET 请求
   this.data = response.data; // 将响应数据存储在组件的 data 属性中
   } catch (error) {
   console.error(error); // 处理错误情况
   }
   },
   };