【Vue】vue中获取本地json文件

首先在项目中新建一个static目录，将json文件拷到该目录下，如图所示：

json文件的格式如图所示：

在配置文件的resolve中定义一下json文件存放的路径，方便后期页面中引入，如图所示：

在需要用到json的页面中进行引入并使用：

方法一：

在网上查了很多资料，大多数的引入方式如下：

先安装vue-resource，安装命令：npm install vue-resource

在main.js文件中添加：

import VueResource from 'vue-resource'

Vue.use(VueResource)
复制代码

在页面上引入：

 mounted() {
    this.$http.get('/static/checklist_compare.json').then(res => {
      console.log('json数据为:' + res.body)
      // 此处的res对象包含了json的文件信息和数据，我们需要的json数据存在于body属性中
    })
}
复制代码

我在使用方法一的时候不知是什么原因，获取不到json文件，报404错误：

经过一番研究，我用了以下方法可以实现：

方法二：

直接在需要使用的页面进行引入：

//通过json文件路径引入
import checkModelJsonData from '/static/checklist_compare.json'
//定义一个变量用于接收数据
data() {
    return {
      checkModelJson: {},
   }
}
//接收数据
mounted() {
    this.checkModelJson = checkModelJsonData
    console.log(this.checkModelJson)
  },
复制代码

成功获取数据，如图所示：