vue1.0本地引入Json文件

最新推荐文章于 2024-08-20 16:52:59 发布

qq_夏阳

最新推荐文章于 2024-08-20 16:52:59 发布

阅读量815

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_41806475/article/details/84638391

vue 专栏收录该内容

15 篇文章

订阅专栏

本文分享了在Vue项目中尝试不同方法导入JSON文件的经历，并最终找到了正确的解决方案。作者最初尝试使用import和require方法引入JSON数据，但均遭遇错误。通过使用$http.get()方法发送GET请求成功获取到了JSON数据。

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

先说说遇到的坑吧，之前是用2.0开发，都是用import方式引入文件；(注： json文件跟我的页面是同级 )

方法1：import  jsonData from 'map.json'      //vue2.0常用的就是这种方式引入
      //运行结果：报错 Uncaught SyntaxError: Unexpected identifier

方法2：const jsonData =require('map.json');      //require引入
      //运行结果：报错 Uncaught ReferenceError: require is not defined

前面两个方法都报错，然后尝试下面的方式，成功拿到数据

方法3：this.$http.get('map.json').then(response => {   
            console.log(response)
      }, response => {
            console.log('数据加载失败')
      })