vuejs：axios get请求的本地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)

原文由 Chris Bao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

所以你应该改变 axios 像这样调用：

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

这将从 json 中获取数据。

原文由 Jin Lin 发布，翻译遵循 CC BY-SA 4.0 许可协议