vue 加载本地json文件的方式

最新推荐文章于 2023-11-20 15:53:22 发布

@炒饭

最新推荐文章于 2023-11-20 15:53:22 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue json

本文链接：https://blog.youkuaiyun.com/weixin_49257048/article/details/107467602

本文是前端开发者关于在Vue项目中加载本地JSON文件的笔记，记录了两种方法：直接import引入和使用axios请求。在实际项目中，由于直接引入不适合接口数据替换，作者推荐使用axios请求方式，通过在http.js中添加请求方法并在组件中调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端小白采坑记，最近接到一个项目，我通过直接引入json数据的方式进行的，前端这边做好页面之后打包发给总监，总监这边再把接口的数据和我自定义的json数据替换掉，可是替换之后发现接口的数据并没有把我自定义的数据替换掉。特记录一下警示自己。用到的技术是vue + element+echars
vue 项目引入本地json数据方式：
方法1，直接引入（*~~这种方式自己练手玩玩就行，不推荐做项目使用~~ *）
通过import直接引入，直接调用data即可获取json文件的内容

import data from '../../public/json/about.json'

在这里插入图片描述
方法2：
通过axios请求的方式，可参考上一篇博客axios的封装
1.在http.js中添加一个请求方法`

export const $getJson = function (method) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: method,
      dataType: "json",
      crossDomain: true,
      cache: false
    }).then(res => {
      resolve(res)
    }).catch(error => {
      reject(error)
    })
  })

2.接口的封装文件中引入$getJson请求方式

import{$get,$post,$getJson}from '../http';

//获取JSON数据
const getH5StaticJson = data => {
  return $getJson('static/h5Static.json',data)
}

3.在组建中使用

this.$api.user.getH5StaticJson({}).then(res => {
      consloe.log(res)
 });