vue 获取本地的json文件内容_vue 获取本地json

很多时候我们需要从本地读取JSON文件里面的内容，但是找了很久我都沒有找到比较实用的；所以分享一下我的vue获取本地json文件的方法。

我的项目结构

获取方法

其实就是用模拟get请求的方法拿到json文件，然后再解析，但是在这之前我们需要对请求头做一下处理，否则拿不到文件

const newInstance = this.$ajax.create({
                        baseURL: '',
                        timeout: 5000,
                        headers: {'Content-type': 'multipart/form-data'}
                    });
1
2
3
4
5

然后就直接根据get请求获取到我们需要的json文件

                    /*../../请根据自己的实际路径来获取*/
                    newInstance.get('./../../static/json/guanzhou.json').then(res => {
                        console.log("获取本地的json文件" + JSON.stringify(res));
                    })
1
2
3
4
5

代码

const newInstance = this.$ajax.create({
                        baseURL: '',
                        timeout: 5000,
                        headers: {'Content-type': 'multipart/form-data'}
                    });
                    /*../../请根据自己的实际路径来获取*/
                    newInstance.get('./../../static/json/guanzhou.json').then(res => {
                        console.log("获取本地的json文件" + JSON.stringify(res));
                    })
1
2
3
4
5
6
7
8
9

实际效果