vuejs：axios获取请求的本地json文件的正确路径

Question

在我的Vue项目中，我模拟了一些用于下一步开发的数据。我已经将测试数据保存在json文件中。我的vue项目是使用Vue-Cli创建的典型项目，我的项目的结构如下：

My_project
    build
    config
    data
        service_general_info.json
    node_modules
    src
        components
            component-A
                component-A.vue

如您所见，所有文件夹最初都是由vue-cli创建的。然后创建一个新文件夹data，并将测试数据json文件放入其中。

我想通过axios库在组件内部的事件处理函数中读取数据，component-A如下所示：

  methods: {
    addData() {
      console.log('add json data...');
      axios.get('./../../data/service_general_info.json');
    },
  },

我使用相对路径来定位目标文件，但返回404错误。那么如何正确设置路径呢？目前，我正在dev本地主机中运行该模式。

错误消息是： GET http://localhost:8080/data/service_general_info.json 404 (Not Found)

Answer 1

在 Vue-cli 项目中，axios无法从自定义文件夹中获取数据。

您应该使用static文件夹来保存测试 json 文件。

所以你应该axios像这样改变电话：

axios.get('/static/service_general_info.json');

这将从json获取数据。

Answer 2

如果您只是为了测试，那么您可以将其保存在公共文件夹中并直接在 http 根目录上访问它。

例如，我在公共文件夹中有文件 results.json 然后我可以使用http://localhost:8080/results.json访问它

Answer 3

对我来说，使用静态文件夹不起作用。我必须把它放在公共文件夹中。

我将 json 文件夹放在公共目录中，然后按如下方式访问它。

getCountries() {
    return axios.get('json/country-by-abbreviation.json', { baseURL: window.location.origin })
        .then((response) => { return response.data; })
        .catch((error) => {
            throw error.response.data;
        });
}

Answer 4

当从服务器进行 http 调用时，axios 不知道您在http://localhost:8080上，您必须提供完整的 url。

像这样：

methods: {
    addData() {
      console.log('add json data...');
      axios.get('http://localhost:8080/data/service_general_info.json');
    },
  },