用axios.get从静态目录加载json文件。(示例代码)

栏目: ios · 发布时间: 2021-05-07

简介  这篇文章主要介绍了用axios.get从静态目录加载json文件。(示例代码)以及相关的经验技巧,文章约744字,浏览量294,点赞数3,值得参考!

在我的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 }
      ) 

以上就是本文的全部内容,希望对大家的学习有所帮助,本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

axios和vue用$refs属性获取dom(示例代码)

vue组件+axios访问本地json(示例代码)

axios 注意点(示例代码)

执行带有axios的GET请求时出现401错误

Axios 简易教程(示例代码)

laravel框架加载静态资源注意事项(示例代码)

VueJS axios CORS Google Api(示例代码)

VUE中 axios GET和POST 如何使用(示例代码)