VUE中json的使用，各种导入方式

vue中json的用法一：import-编译时输出接口

items.json：

{
  "data": [
    {
      "name": "数码",
      "childrenItem": [
        {
          "name": "手机"
        },
        {
          "name": "手表"
        },
        {
          "name": "闹钟"
        }
      ]
    },
    {
      "name": "数码",
      "childrenItem": [
        {
          "name": "手机"
        },
        {
          "name": "手表"
        },
        {
          "name": "闹钟"
        }
      ]
    }
  ]
}

vue文件引入：

<script>
	import list from "./items.json"
	export default {
		name: "app",
		data() {
			return {
				items: list.data

			}
		}
	}
</script>

vue中json的用法二：require-运行时加载

test.json文件
{
  "testData": "hello world",
  "testArray": [1,2,3,4,5,6],
  "testObj": {
    "name": "tom",
    "age": 18
  }
}

// require引用：
mounted() {
    // require引用时，放src和放statci都可以，建议放static
    const testJson = require('../../static/json/test.json');
    // const testJson = require('./json/test.json');
    const {testData, testArray, testObj} = testJson;
    console.log('testData',testData);
    // ‘hello world’
    console.log('testArray',testArray);
    // [1,2,3,4,5,6]
    console.log('testObj',testObj);
    //    {
    //    "name": "tom",
    //    "age": 18
    //  }
}

vue中json的用法三：通过http请求获取

test.json文件
{
  "testData": "hello world",
  "testArray": [1,2,3,4,5,6],
  "testObj": {
    "name": "tom",
    "age": 18
  }
}

// http引用
methods:{
  async jsonHttpTest(){
    const res = await this.$http.get('http://localhost:8080/static/json/test.json');
    // 放在src中的文件都会被webpack根据依赖编译，无法作为路径使用，static中的文件才可以作为路径用
    // const res = await this.$http.get('http://localhost:8080/src/page/json/test.json');
    const {testData, testArray, testObj} = res.data;
    console.log('testHttpData',testData);
    // ‘hello world’
    console.log('testHttpArray',testArray);
    // [1,2,3,4,5,6]
    console.log('testHttpObj',testObj);
    //    {
    //    "name": "tom",
    //    "age": 18
    //  }        
  }
},
mounted() {
  this.jsonHttpTest();
},

改写于：
作者：来碗鸡蛋面
链接：https://www.jianshu.com/p/6839ffe69338