使用两种方式调用本地json文件(基于Vue-cli3脚手架)

使用两种方式调用本地json文件

在前端开发过程中，当后台服务器开发数据还没完善，无法与前端进行交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。

vue-cli3.0往后的项目基础架构对比旧版本有些区别。

以前大家都习惯在根目录下的static文件夹下创建json文件，然而vuecli3、4没有static文件夹了。

若创建一个static文件夹在下面存放json文件，在实际调用过程中会报错，提示请求404。

因此本文将提供两种方法调用本地的json文件。

1. 利用Axios请求调用本地json文件

Vue cli3削减掉static文件夹，取而代之的是在项目根目录下（与src同级）生成public文件夹，用于存放静态资源，如下图所示，可以将本地json文件放到public文件夹下。

利用axios的get请求方式，可以调用上述json文件。

axios.get('/confidence-band.json').then(res => {
	console.log(res.data)
})

需注意，axios是异步的，如果转成同步进行，需要在外函数添加async，axios前加await。

2. import直接调用（推荐）

上述方式本地json文件必须存放指定位置，同时还要考虑同步异步的问题。

利用import引用，本地json文件无需存放指定位置，以存放assets文件夹下的json文件夹为例。

引用及调用：

import confidence_band_json from '@/assets/json/confidence-band.json' // 引用

let data = confidence_band_json // 调用

两种方式各自有使用场景，若无要求，建议使用第二种方式，调用更为简单。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。