在Vue项目中,使用axios请求Vue项目中的JSON文件。已踩坑

1、引入axios,这一步不用多说了;

2、坑1:使用新版vue-cli 搭建的vue2项目,要把JSON文件放到 项目中的 public 文件夹中,并且要写绝对路径,这是因为:

A、assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。build的时候由Webpack解析为模块依赖。
B、public/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。
必须使用绝对路径引用这些文件,这是通过在 项目vue.config.js文件中的 assetsPublicPath 和
assetsSubDirectory 连接来确定的。 任何放在 public/中文件需要以绝对路径的形式引用:/static/[filename],所以如果需要引用static目录下的图片及其他资源,应该使用绝对路径
如果你改变assetSubDirectory 为assets, 那么这些 URLs将需要被替换为 /assets/[filename].

3、public 中的JSON文件,在发送axios请求时,不要携带 public 这个目录名

    created() {
      axios({
        method: 'get',
        url: '/static/shijing.json',
      }).then((data) => {
        console.log(data)
      })
    },
    methods: {},
  }

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值