vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue加载读取本地txt/json等文件

Vue加载读取本地txt/json等文件的实现方式

作者:1024小神

这篇文章主要介绍了Vue加载读取本地txt/json等文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue加载读取本地txt/json等文件

首先

本地的txt/json文件的位置一定要放在public文件夹下: 

不然读取不到

在utils文件夹下创建一个方法

const loadFile = function (name) {
  // name为文件所在位置
  let xhr = new XMLHttpRequest()
  const okStatus = document.location.protocol === 'file:' ? 0 : 200
  xhr.open('GET', name, false)
  xhr.overrideMimeType('text/html;charset=utf-8') //默认为utf-8
  xhr.send(null)
  return xhr.status === okStatus ? xhr.responseText : null
}
export default loadFile

位置

或者放在vue的methods下也可以

然后在vue中引入

注意文件路径

是./开头的

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文