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

 


  • 2020-02-26 20:16:49

    一条简单的命令就可以将 stylus 语法转换为 scss 语法

    因为早期有个项目用到了 stylus,stylus 开发起来很爽,但 stylus 基于缩进的代码在修改的时候不是很方便,加上所在团队开发使用的都是 SCSS ,为了便于维护和统一,准备将项目中的 stylus 替换成 SCSS。手动转换 stylus 浪费时间,且出错率大,当时在想也许别人也有这样的需求呢,所以就做了这样一个项目。请各位大佬动动你们发财的小手,给我点个 star,不胜感激。^_^

  • 2020-02-27 09:01:32

    npm yarn 命令对比

    Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题.

  • 2020-02-29 20:47:34

    Nuxt 特有函数和变量

    asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的,所以,请求数据时,不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

  • 2020-03-01 19:00:46

    触发onclick事件元素的获取

    自动生成元素的onclick事件 event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素