Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式
更新時(shí)間：2023年10月11日 15:13:34 作者：1024小神
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue加載讀取本地txt/json等文件
首先
本地的txt/json文件的位置一定要放在public文件夾下：
不然讀取不到
在utils文件夾下創(chuàng)建一個(gè)方法
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') //默認(rèn)為utf-8
xhr.send(null)
return xhr.status === okStatus ? xhr.responseText : null
}
export default loadFile位置
或者放在vue的methods下也可以
然后在vue中引入
注意文件路徑
是./開頭的
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3響應(yīng)式Object代理對象的讀取示例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Object代理對象的讀取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue綁定用戶接口代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
解決element-ui中下拉菜單子選項(xiàng)click事件不觸發(fā)的問題
今天小編就為大家分享一篇解決element-ui中下拉菜單子選項(xiàng)click事件不觸發(fā)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue+導(dǎo)航錨點(diǎn)聯(lián)動-滾動監(jiān)聽和點(diǎn)擊平滑滾動跳轉(zhuǎn)實(shí)例
今天小編就為大家分享一篇vue+導(dǎo)航錨點(diǎn)聯(lián)動-滾動監(jiān)聽和點(diǎn)擊平滑滾動跳轉(zhuǎn)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue報(bào)錯(cuò)"vue-cli-service‘不是內(nèi)部或外部命令,也不是...”的解決辦法
這篇文章主要介紹了vue報(bào)錯(cuò)"vue-cli-service‘不是內(nèi)部或外部命令，也不是...”的解決辦法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
文章介紹了使用vue-pdf@4.3.0時(shí)遇到的上傳特殊PDF文件無法正常預(yù)覽的問題,通過查看控制臺報(bào)錯(cuò)信息,發(fā)現(xiàn)是因?yàn)槿鄙僮煮w導(dǎo)致的,解決方法是修改pdfjs-dist庫的代碼,注釋掉隱藏電子簽章的代碼,為了在生產(chǎn)環(huán)境中應(yīng)用這個(gè)修改,使用了patch-package插件,感興趣的朋友一起看看吧2024-11-11
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設(shè)置方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue大屏展示適配，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue使用directive限制表單輸入整數(shù)、小數(shù)的方法
這篇文章主要介紹了vue使用directive限制表單輸入整數(shù)，小數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04