用axios.get从静态目录加载json文件。

Posted 2021-05-07

在我的vue.js App中，我一直从一个API加载所有数据，我在nuxt.config.js中配置了baseURL。现在我想加载一个静态的json文件，这个文件不是来自那个API。为了保持代码的一致性，我想使用axios.get来加载静态数据，就像调用API一样，到目前为止我还没有做到。

我把json文件放在我的静态目录中，并尝试像这样访问文件。

const { data } = await axios.get(
        '_nuxt/static/json/staticData.json',
        { baseURL: window.location.origin }
      )

我可以通过静态目录访问其他静态文件，比如图片，但json文件会产生404错误。我应该选择另一个目录，还是尝试一种完全不同的方法？

答案

我加入了路径段"_nuxtstatic"，因为我检查参考的渲染图片文件的URL中也有它。结果发现这不是我的Axios调用的正确URL。代码应该这样写。

const { data } = await axios.get(
        '/json/staticData.json',
        { baseURL: window.location.origin }
      )