获取本地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('路径')

获取本地json文件相关推荐

vue获取本地php数据,Vue-cli项目获取本地json文件数据的实例
下面我就为大家分享一篇Vue-cli项目获取本地json文件数据的实例,具有很好的参考价值,希望对大家有所帮助. 在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件 ...
动态获取本地json文件，渲染为表格-前端html+css+javascript，nth-child选择器，实时浏览插件，vscode，ajax
从本地获取到json文件,并进行动态的渲染demo来啦~ 此文章对table表格,nth-child()选择器,插入html标签做的小demo,大佬请绕道,感兴趣的uu可以安心"食用&quo ...
axios 获取本地json文件
安装axios 找到main.js文件配置axios import axios from 'axios' Vue.prototype.$axios = axios 将json文件放到public文件夹 ...
android studio中存放json文件，获取assets文件下下文件，获取本地json文件并解析
转自http://blog.csdn.net/yanxiaosa/article/details/70859927 以前看过这些知识,今天用到的时候,发现自己忘记了,都不知道assets文件夹在哪个目 ...
jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
Jquery中使用JsonP加载本地json文件解决跨域问题
场景 jquery中直接请求本地json文件时会提示跨域问题. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
将Chrome调试器里的JavaScript变量保存成本地JSON文件
我们在Chrome开发者工具的Console标签页里,可以输入JavaScript变量然后回车,查看这些变量的值. 比如我用类jQuery选择器的语法 var button = $('button') ...
html5 写json 文件,HTML5实现本地JSON文件的读写
参考: 使用HTML5来实现本地文件读取和写入 (FileReader读取json文件,FileSaver.js保存json文件) JS创建.写入.读取本地文件(txt) (ActiveXObj ...

获取本地json文件

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

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

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

获取本地json文件相关推荐

最新文章

热门文章