获取本地json文件

方法一：vue中获取本地json文件

//通过json文件路径引入
import jsonData from './***.json'
//定义一个变量用于接收数据
data() {
    return {
      commonJson: {},
   }
}
//接收数据
mounted() {
    this.commonJson= jsonData 
    console.log(this.commonJson) 
},

方法二：使用axios发起get请求获取对应的json文件数据

import axios from 'axios'  // 安装axios后引入
Vue.prototype.$axios = axios  // 将axios挂载到原型上方便使用
 
// 使用get请求获取到test.json文件的数据
this.$axios.get('./test.json').then(res => {   
    console.log(res)
})

请求报404错误,原因是vue-cli3.0之后创建的项目静态资源都放在了根目录下的public目录下，因此需要将json文件建在public目录下即可

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

// json文件放在static下
// 访问路径带static
this.$axios.get("./static/data/test.json", {}).then(response => {
  console.log(response)
}）

方法三：在vue文件通过require引入

let data = require('路径')