vue项目如何读取本地json文件数据

有多少种可能性

于 2021-12-30 15:47:26 发布

阅读量5.6k

点赞数 3

分类专栏： vue 文章标签： vue.js json 前端

本文链接：https://blog.csdn.net/themansea/article/details/122238468

版权

5 篇文章

订阅专栏

本文指导如何在VueCLI3项目中正确处理静态资源，包括将buildmenu.json移至public目录，调整请求路径，并支持嵌套文件结构，确保数据获取的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue cli2中

将所需要的json文件放在该static目录下，使用axios发起get请求获取对应的json文件数据

// 使用get请求获取到static目录下的 buildmenu.json文件的数据
axios.get('/static/buildmenu.json').then(res => {   
        console.log(res)
})

在vue cl3中及以上版本创建的项目这样请求会报404错误，原因是vue-cli3.0之后创建的项目静态资源都放在了根目录下的public目录下，因此需要将json文件建在public目录下，
请求的地址需要改变，如下：

axios.get('/buildmenu.json').then(res => {     // 获取public下的buildmenu.json文件数据
        console.log(res)
})

还可嵌套文件夹

// public/json/buildmenu.json 这样也可拿到
axios.get('/json/buildmenu.json').then(res => {     
     console.log(res)
})