vue-cli学习之调用json文件

vue-cli学习之调用json文件

Vue-cli 项目调用本地json文件方法

---

方法一import导入

例如

import codedata from "./Areacode.json";

在methods中直接调用codedata即可

方法二Axios请求

代码如下（示例）：
请求一个json文件

methods: {
    initMap() {
      axios
        .get("本地路径")
        .then((res) => {
          console.log(res);
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
  },

请求多个json文件
创建url变量

var url0 = "../static/shanxi.json",
    url1 = "../static/山西省大同市.json",
    url2 = "../static/山西省晋城市.json",
    url3 = "../static/山西省晋中市.json",
    url4 = "../static/山西省临汾市.json",
    url5 = "../static/山西省吕梁市.json",
    url6 = "../static/山西省朔州市.json",
    url7 = "../static/山西省太原市.json",
    url8 = "../static/山西省忻州市.json",
    url9 = "../static/山西省阳泉市.json";

创建地址数组

      const urls = [url0,url1,url2,url3,url4,url5,url6,url7,url8,url9,url10,url11,];
      //变成包含多个promise实例对象的数组
      const urlArray = urls.map((url) => {
        return axios.get(url);
      });

axios请求

 axios
        .all(urlArray)
        .then((res) => {
        console.log(res);
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
  },

---