vue.js--加载JSON文件的两种方式

方法一:

通过import直接引入,直接调用data即可获取json文件的内容。

import data from 'static/h5Static.json'

该方法比较直接,但是打包以后发现变更JSON文件,结果渲染的页面还是与最初打包JSON文件渲染出来的页面一样,并不能达到我想要的结果,因此尝试了方法二。

方法二:

通过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)
 });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值