Vue读取本地静态文件json的2种方法以及优缺点

下面是详细的攻略。

Vue如何读取本地静态文件json

在Vue中，我们可以使用以下两种方法读取本地静态文件json。

方法一：使用Ajax来读取本地静态文件json

第一种方法是使用Ajax进行读取，在Vue中可以通过axios库来实现Ajax请求。将本地静态文件JSON作为静态资源放在static文件夹下：

|-- src
|   |-- App.vue
|   |-- main.js
|-- static
|   |-- data.json

在Vue中创建一个单独的服务来读取data.json文件，以便在组件中使用这些数据：

import axios from 'axios';

export default {
  getLocalJsonData() {
    return axios.get('/static/data.json').
      then(function (response) {
         return response.data;
      });
  }
}

这里使用了axios的get请求并将JSON数据存储在response中，最后仅返回JSON数据。接着，在Vue组件中调用这个服务：

<template>
  <div id="app">
    <ul>
      <li v-for="item in jsonData">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import dataService from './services/dataService';

export default {
  name: 'App',
  data () {
    return {
      jsonData: []
    }
  },
  created() {
    dataService.getLocalJsonData()
      .then((jsonData) => {
        this.jsonData = jsonData;
      });
  }
}
</script>

这个Vue组件从dataService服务中获取JSON数据。返回的数据将被存储在组件的jsonData数据模型中，并通过v-for指令渲染UL列表。

优点是，这种方法非常简单，易于理解和实现。缺点是：
- 需要使用第三方库axios进行Ajax请求。
- 仅适用于读取本地静态json文件，如果需要读取其他类型文件需要使用不同的Ajax方法。

方法二：通过import读取JSON文件

第二种方法是通过使用import命令直接读取JSON文件，然后在组件中使用它。同样的把本地静态json文件放在static文件夹下：

|-- src
|   |-- App.vue
|   |-- main.js
|-- static
|   |-- data.json

在组件的script标签中使用import导入JSON文件：

import jsonData from '@/static/data.json';

在Vue组件的data选项中定义一个jsonData属性，并将import命令导入的数据赋值给它：

<template>
  <div id="app">
    <ul>
      <li v-for="item in jsonData">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import jsonData from '@/static/data.json';

export default {
  name: 'App',
  data () {
    return {
      jsonData: jsonData
    }
  }
}
</script>

优点是，这种方法很简单并且与导入JS或CSS文件相同。缺点是：
- 需要使用Webpack或其他打包工具来读取文件。
- 如果在不同组件中多次使用同一数据，可能会有重复性的import代码。

示例说明

这里提供两个Vue组件的示例，一个是使用Ajax来读取JSON文件的方法，另外一个是通过import导入静态文件。

例一：使用Ajax来读取JSON文件

dataService.js

import axios from 'axios';

export default {
  getLocalJsonData() {
    return axios.get('/static/data.json').
      then(function (response) {
         return response.data;
      });
  }
}

App.vue

<template>
  <div id="app">
    <ul>
      <li v-for="item in jsonData">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import dataService from './services/dataService';

export default {
  name: 'App',
  data () {
    return {
      jsonData: []
    }
  },
  created() {
    dataService.getLocalJsonData()
      .then((jsonData) => {
        this.jsonData = jsonData;
      });
  }
}
</script>

例二：通过import导入静态文件

App.vue

<template>
  <div id="app">
    <ul>
      <li v-for="item in jsonData">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import jsonData from '@/static/data.json';

export default {
  name: 'App',
  data () {
    return {
      jsonData: jsonData
    }
  }
}
</script>

希望这个攻略可以对你有所帮助。如果还有什么问题或需要更多的帮助，请随时问我。