在vue中读取本地Json文件的方法

其实关于这个问题，网上已经可以找到些方法，不过基本上没有完整的，或者是其中有些坑，下面写一下自己的亲身实践。

使用vue读取本地json文件需要安装vue-resource插件，然后使用它的$http.get来读取json文件。

json文件应该是必须放在static目录下

然后使用npm install 命令安装vue-resource，太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件。

在main.js文件中添加：

import VueResource from 'vue-resource'

然后：

Vue.use(VueResource)

最后读取json数据：

this.$http.get('static/map/china.json').then(res => {
 console.log("json数据为:" + res.body)//此处的res对象包含了json的文件信息和数据，我们需要的json数据存在于body属性中
})

这样就能读取json数据了！

以上这篇在vue中读取本地Json文件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 自定义指令自动获取文本框焦点的方法

    HTML: <p><b v-show="show">{{tag}}</b><input v-focus v-model="tag" :hidden="show" type="text"></p> js: 官方例子: directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } 我的

  • Vue2.5通过json文件读取数据的方法

    1.准备工作 1.1 webpack.dev.conf.js 在 const portfinder = require('portfinder') 的下面加上以下代码 const express = require('express') const app = express() var appData = require('../data.json')//加载本地数据文件的路径 var leftMenu = appData.leftMenu //获取对应的本地数据 var 数据名称 = app

  • 使用FileReader API创建Vue文件阅读器组件

    使用FileReader API创建Vue文件阅读器组件

    有时候我们需要从文件中读取数据.在以前,你需要将其发送到服务器,然后返回所需的数据.问题是,现在我们还可以使用 FileReader API 直接访问浏览器中的文件. 如果我们只是想读取一个文本文件,以便在UI级别上做一些无关紧要的事情,那么就不需要将文件发送到服务器.下面的示例将实现从一个文件中读取相关的数据填充到一个 textarea 中. FileReader API FileReader API提供了一个很好的接口,可以使用文本或Blob对象类型以不同的方式读取数据. FileReade

  • nodejs(officegen)+vue(axios)在客户端导出word文档的方法

    nodejs(officegen)+vue(axios)在客户端导出word文档的方法

    前言 我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息 我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写的挺好的(github上的那篇里面还有node.js生成word.excel.ppt的example,需要详细的可以看里面) https://www.jb51.net/article/144769.htm https://github.com/Ziv-Barber... 问题 node.js上面这两

  • vue读取本地的excel文件并显示在网页上方法示例

    我想实现读取一个本地的xlsx文件(task_list.xlsx)然后显示在网页上, 一开始选择的方法是建个express server, 通过发送axios请求来实现, 但是觉得只是读取一个本地文件还要搞个server太复杂了, 最终还是通过"xlsx"模块 + axios实现了读取本地文件, 无需后端, 步骤如下: 1.通过vue-cli新建项目: 2.编写分析excel workbook的脚本 /src/scripts/read_xlsx.js const XLSX = requ

  • 解读vue生成的文件目录结构及说明

    解读vue生成的文件目录结构及说明

    利用node和npm环境我们可以很快的搭建一个vue环境.具体步骤,请看上一篇博客.搭建完成后,我们可以看到生成的文件夹中包括如下文件: 1.build文件夹是保存一些webpack的初始化配置.config文件夹保存一些项目初始化的配置. 2.node_modules是npm加载的项目依赖的模块. 3.src目录是我们要开发的目录,打开是这样的: 其中assets:用来放置图片 components:用来放组件文件 app.vue:是项目入口文件,代码如下: App.vue相当于一个组件 ma

  • Vue 实现从文件中获取文本信息的方法详解

    Vue 实现从文件中获取文本信息的方法详解

    本文实例讲述了Vue 实现从文件中获取文本信息的方法.分享给大家供大家参考,具体如下: 最近在使用vue做项目的时候,遇到一个需求,界面中需要显示大量的说明文字,为了保持界面的整洁和赶紧,决定采用单独的文件来存储显示信息,然后通过文件读取的方式显示到界面上. 刚开始我使用的是File和FileReader对象获取,但是比较气人的是这两个对象是IE浏览器特有的属性,chrome不支持,而且为了安全起见,现在浏览器是不推崇这种做法的,因为很容易造成文件被外部恶意删除或增加内容,安全性太低.无奈之下,

  • vue实现文件上传读取及下载功能

    本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下 文件的上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现 <template> <div class="filediv"> <el-button @click="downloadFile">下载</el-button> <div id="fil

  • vue通过点击事件读取音频文件的方法

    我们项目现在有这样一个需求,通过select元素来选择音频文件的名称,点击按钮可以进行试听. 话不多说,直接上代码: HTML: <div class="testVoice"> <p class="p-title">提示声音:</p> <el-select v-model="valueOpt2" placeholder="请选择"> <el-option v-for=&qu

  • vue实现word，pdf文件的导出功能

    vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) .then(res => { if(res.status == 200){ let blob = new Blob([res.data], { type: `application/

随机推荐