vue加载JSON文件的两种方式

2021-08-26 09:25:47

感觉在idea开发工具上,json文件的提示效果比js对象提示还要直观

方法一:

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

 


  • 2019-01-08 14:35:50

    ueditor 特殊符号转义

    几个月前,就有同事跟我反馈,说磨途歌的留言板有问题。当时看了一下,她用的是谷歌浏览器,确实打不出中文,才按下一个字母,英文字母就从输入法的输入框中直接跳出来了,更换火狐浏览器就没这个问题。很奇怪的是,在我电脑上的火狐浏览器跟谷歌浏览器都没有问题,一开始还以为是她电脑的问题,就没在意了。

  • 2019-01-12 23:28:58

    NodeJS实现视频转码

    视频转码就是一个先解码,再编码的过程,从而将原来的视频转换成我们需要的视频。这种转换可能包括各式(mp4/avi/flv等)、分辨率、码率、帧率等。