vue 请求public下面的json文件

你可以使用 axios 库来请求 public 下面的 JSON 文件。首先，确保你的 JSON 文件已经放置在 public 目录下。然后，在你的 Vue 组件中，可以这样使用 axios：

import axios from 'axios';

axios.get('/your-json-file.json')
  .then(response => {
    console.log(response.data); // 在控制台中打印 JSON 数据
  })
  .catch(error => {
    console.log(error);
  });

在上面的代码中，axios 发送了一个 GET 请求，请求的 URL 是相对于网站根目录的，所以只需要写上 JSON 文件的路径即可。如果请求成功，控制台中将打印出 JSON 数据；如果请求失败，将会在控制台中打印出错误信息。

相关问题

vue 请求public下面的json文件打包后跨域

如果您在 Vue 应用中使用 Axios 或 Fetch 进行请求 public 目录下的 JSON 文件，在打包后可能会遇到跨域问题。

解决方法是在打包后的服务器上进行配置，让服务器允许跨域请求。您可以在服务器端的响应头中添加 Access-Control-Allow-Origin 字段，允许指定的域名进行跨域请求。例如：

Access-Control-Allow-Origin: * // 允许所有域名进行跨域请求

如果使用的是 Nginx 服务器，可以在 Nginx 的配置文件中添加以下配置：

location /public {
    add_header 'Access-Control-Allow-Origin' '*';
}

这样在访问 public 目录下的文件时就可以避免跨域问题了。

vue怎么加载本地json文件

在Vue中加载本地JSON文件可以使用Axios来发送HTTP请求。首先，将要加载的JSON文件放置在Vue项目的静态目录下（一般为`public`目录）。然后，可以使用Axios发送GET请求来获取该JSON文件的数据。

首先，在Vue组件中导入Axios库：

import axios from 'axios';

然后，在Vue组件的`mounted`生命周期钩子函数中发送HTTP GET请求以加载JSON文件：

export default {
  name: 'MyComponent',
  mounted() {
    axios.get('/data.json')
      .then(response => {
        // 在这里处理获取到的JSON文件数据
        console.log(response.data);
      })
      .catch(error => {
        // 处理请求错误
        console.error(error);
      });
  }
}

以上代码的`axios.get('/data.json')`语句会发送一个GET请求来加载位于项目根目录下的`data.json`文件。请求成功后，可以在`.then()`回调函数中处理获取到的JSON文件数据。如果请求失败，可以在`.catch()`回调函数中处理错误。

注意，`axios.get()`方法返回的是一个Promise对象，所以可以使用`.then()`和`.catch()`方法来处理请求的成功和失败。