Vue加载读取本地txt/json等文件的实现方式
更新时间：2023年10月11日 15:13:34 作者：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中引入
注意文件路径
是./开头的
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue中el-table格式化el-table-column内容的三种方法
本文主要介绍了vue中el-table格式化el-table-column内容的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了Vue 进阶教程之v-model详解 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了vue如何读取本地文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue滚动页面到指定位置的实现及避坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了如何使用Vue3和Ant Design Vue4.x实现图像标点和质量检测功能,文章详细描述了两种方式,每种方式都包括前端显示代码、配置基本数据、绘制圆点和序号以及处理图片点击的步骤,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了Vue3源码解读静态提升示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最近想实现个项目,需要配置全局less,本文主要介绍了vite项目配置less全局样式的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
vue-pdf-embed是一个基于Vue.js的插件,专门用于在Vue应用中嵌入和展示PDF文件,本文将使用vue-pdf-embed实现PDF在线预览功能,有需要的小伙伴可以参考一下2025-03-03
Vue import from省略后缀/加载文件夹的方法/实例详解
本文介绍Vue在import时省略后缀以及import文件夹的方法，结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
最新评论