一种有`static`目录，指`static`文件与`vue.config.js`同级；静态资源存放在`static`下

一种有`public`目录，指`public`文件与`vue.config.js`同级；静态资源存放在`public`下

所以解决方案也不一样；

首先下载并导入axios：

        在集成终端中：npm i axios

        在main.js文件中：

                import axios from 'axios'  // 安装axios后引入

                Vue.prototype.$axios = axios  // 将axios挂载到原型上方便使用

1、json文件放在static下：

 this.$axios.get("./static/json/map/100000.json", {})
          .then(response => {}）
访问路径要带 ./static 

2、json文件放在public下：

 this.$axios.get("./json/map/100000.json", {})
    .then(response => {}）
访问路径不用带public ，直接访问public下的文件即可

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

后台项目，某些页面新增/编辑需要用到选择地址信息，可能不仅仅只有中国的省市区，数据会比较大，直接引用json文件，页面加载会很慢，个人觉得本人的方法还挺方便。

项目结构：

本人这个项目，是在static文件夹的js文件夹下创建的data.json
该方法有局限性：只能在需要读取的组件内用get找到文件进行读取
JSON数据格式：

代码：

import axios from 'axios' 		//需引入axios 
axios.get('../../../static/js/data.json').then(res=> {
	console.log(res.data)	//地址数据
})

打印结果：


打印的数据为res返回的结果，以及网络请求返回的数据
效果展示：