vue中读取本地Json文件的方式

vue中读取本地Json文件的方式

json案例：

{
  "name": "DevilBen",
  "url": "https://www.cnblogs.com/devilben/",
  "page": 0,
  "isNonProfit": true,
  "address": {
    "street": "浦江镇",
    "city": "上海市闵行区",
    "country": "中国"
  },
  "links": [
    {
      "name": "博客园",
      "url": "https://home.cnblogs.com/"
    },
    {
      "name": "DevilBen",
      "url": "https://www.cnblogs.com/devilben/"
    },
    {
      "name": "百度一下，你就知道",
      "url": "https://www.baidu.com/"
    }
  ]
}

json文件放在static静态资源包下

 

 

 

方式一：

1，安装 Axios

npm install axios -s

2，main.js引用 Axios

 //引入axios
  import axios from "axios"
 //使用axios
  Vue.prototype.axios = axios

3，钩子函数获取文件

mounted() { 
    this.axios.get('static/data.json').then(response => this.info = response.data)
}

方式二：

1，安装vue-resource

npm install vue-resource

2，在main.js文件中添加：

 //引入vue-resource
import VueResource from 'vue-resource'
//使用VueResource 
Vue.use(VueResource)

3，通过钩子函数使用，它的$http.get来读取json文件

mounted() { 
    this.$http.get('static/data.json').then(response => this.info = response.data)
}

 

完整代码：

<template>
  <div id="vue">
    <div>名称：{{info.name}}</div>
    <div>url：{{info.url}}</div>
    <div>地址：{{info.address.country}}==={{info.address.city}}==={{info.address.street}}</div>
    <ul>
      <li v-for="link in info.links">
        {{link.name}}===<a href="link.url" target="_blank" >{{link.url}}</a>
      </li>
    </ul>
  </div>
</template>
​
<script>
export default {
  name: 'HelloWorld',
    data() {
        return {
            info: {
                name: '',
                url: '',
                address: {
                    street: '',
                    city: '',
                    country:''
                },
                links:[]
            }
        }
    },
    mounted() {    
//方式一
 this.axios.get('static/data.json').then(response => this.info = response.data)
//方式二
//this.$http.get('static/data.json').then(response => this.info = response.data)
    }
}
</script>
<style scoped>
</style>