vue-cli3读取本地json文件

背景

一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景，这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取。

由于公司业务，需要在进入页面的时候，一次获取15万条数据用于输入框的模糊搜索，但是这样前端一次性获取如此大量的数据，直接就导致了页面崩溃，加载奇慢。
这么大量且不需要时常做变更的数据，除了放到后端，通过分页的办法进行请求，还可以采用将数据转为json文件，存到前端的本地项目里，由前端进行维护。

前端如何读取本地json文件

前端存放json文件的位置

我们的项目是通过vue-cli3创建的，vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹)，这里本地json文件也应该放在这里

请求JSON数据

封装axios实例

import axios from 'axios';

const service = axios.create({
  baseURL: '', // 请求本地json文件，那么baseURL取空字符串，域名就会是项目域名
  timeout: 30000,
});



// 请求拦截
service.interceptors.request.use(
  (config) => {
    return config;
  },
  (error: any) => {
    Promise.reject(error);
  },
);

// 响应拦截
service.interceptors.response.use(
  (response: any) => {
    const res = response.data;
    return Promise.resolve(res);
  },
  (error: any) => {
    return Promise.reject(error);
  },
);

export default service;

封装请求方法

特别注意：json文件存放在public目录下，如/public/data/jsonData.json,那么在请求json数据的时候，地址千万千万千万不能写/public/data/jsonData.json，而是写/data/jsonData.json，否则会报404，因为静态资源在打包后，默认public内的文件放在项目根目录，

import $axiosJson from '@/utils/axiosJson'; // 引入封装的axios实例
// 获取本地json数据
export const getJsonDataApi = () => {
  return $axiosJson({
    url: `/data/jsonData.json`, // json文件地址
    method: 'GET',
  });
};

页面组件调用请求方法

<template>
  <div></div>
</template>

<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import { getJsonDataApi } from '@/api/account';

@Component({
  components: {
  },
})
export default class GetJson extends Vue {
  private jsonData: any = [];
  private created() {
    this.getBankList();
  }
  // 获取本地JSON数据
  private async getJsonData() {
    const res = await getJsonDataApi();
    this.jsonData= res;
  }
}
</script>
<style lang='scss' scoped>
</style>

文章参考：https://blog.csdn.net/reffrselom/article/details/96873428