Vue讀取本地靜態(tài)文件json的2種方法以及優(yōu)缺點
Vue讀取本地靜態(tài)文件json
使用vue讀取本地的靜態(tài)文件
方法一：require
格式：
var json = require('文件的相對地址');優(yōu)點：可以按照你寫的順序去執(zhí)行，沒有任何書寫方面的局限。
缺點：當(dāng)你打包的時候，它很可能被打包到 js 中去，出現(xiàn)這種情況基本就涼涼了。你的 js 超級大。網(wǎng)站基本無法訪問。
解決：你的 js ，很大但是你可以把它cdn加速。這樣雖然很方便，但是你的流量就會消耗的很快?！惧X多無視流量】
方法二：ajax
格式：
this.$ajax.get('http://localhost:80/static/map/province/anhui' +'.json')
.then( response => {
this.json = response.data;
})說明：
1、上面的ajax的請求地址，是你的服務(wù)器地址。簡單來說，你復(fù)制這個地址去瀏覽器可以訪問到你的json數(shù)據(jù)。
2、上面的 ajax 是 axios。我只是給它重新取了個名字
3、缺點是，你無法控制ajax什么時候去調(diào)用的。很可能當(dāng)你需要數(shù)據(jù)的時候，即使你把上面請求的代碼，放在最前面都可能不行。
4、解決辦法。如果你請求的數(shù)據(jù)只有一次一個。那么你只需要把你的渲染代碼。放在ajax的回調(diào)函數(shù)里面就好了。
5、如果你是多次請求，你可以考慮一下ajax的嵌套。 所有的渲染頁面，都放在ajax里面，一定確保要渲染的時候已經(jīng)獲取到了數(shù)據(jù)。
總結(jié)： 雖然，require 來獲取數(shù)據(jù)很簡單，很容易被接受。但是js太大，這一個缺點就抹殺了它。推薦使用ajax。
Vue cli獲取本地json數(shù)據(jù)總是404報錯
vue cli版本查看
創(chuàng)建項目后 vue -V 查看腳手架版本，一般看文件目錄就能看了
- vue-cli版本是2.0左右的就會有webpack的config目錄
- vue-cli版本是3.0以上的就會有vue.config.js沒有config目錄
為什么會要先查看腳手架版本就是之后會出現(xiàn)的問題有關(guān)
創(chuàng)建本地json數(shù)據(jù)
vue-cli2.0將本地json數(shù)據(jù)放到目錄static目錄下
然后用請求就行了
這是vue cli2.0處理 之前我也是找了很久 有說放public目錄下訪問的 有說放static目錄下訪問的，都是報404錯誤，主要是腳手架版本沒說清楚，我的是vue cli2.0用這方法就能訪問了。
vue cli3.0將文件放在public目錄下 訪問的時候像這樣：
如果不行可以試試絕對路徑
在用 axios 時使用絕對路徑。如http://localhost:8080/xxx.json。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了apache和nginx下vue頁面刷新404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
由于添加門店時，需要選擇門店的省、市、區(qū)、詳細地址、以及門店的經(jīng)緯度信息，本文給大家分享Vue集成百度地圖實現(xiàn)位置選擇功能，感興趣的朋友一起看看吧2022-06-06
這篇文章主要介紹了優(yōu)化Vue中date format的性能詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時間內(nèi)重復(fù)進行接口請求，重復(fù)發(fā)送多次請求，本文主要介紹了Vue中Axios中取消請求及阻止重復(fù)請求的方法，感興趣的可以了解一下2022-02-02
vue動態(tài)綁定多個類名方法詳解(:class動態(tài)綁定多個類名)
vue中可以通過:class=""這樣來根據(jù)一定的條件來動態(tài)添加class,但是有時候需要判斷的條件比較多,需要動態(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)綁定多個類名(:class動態(tài)綁定多個類名)的相關(guān)資料,需要的朋友可以參考下2022-11-11
關(guān)于vue中對window.openner的使用指南
opener屬性是一個可讀可寫的屬性,可返回對創(chuàng)建該窗口的Window對象的引用,下面這篇文章主要給大家介紹了關(guān)于vue中對window.openner使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue實現(xiàn)剪貼板復(fù)制功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
在Vue應(yīng)用中,跨標(biāo)簽頁的通信通常涉及到兩個或多個瀏覽器標(biāo)簽頁之間的信息共享,由于每個標(biāo)簽頁或窗口都是獨立的JavaScript執(zhí)行環(huán)境,它們不能直接通過Vue或其他JavaScript庫來直接相互通信,但是,有一些方法可以實現(xiàn)這種跨標(biāo)簽頁的通信,以下是一些常用的跨標(biāo)簽頁通信方法2025-03-03
本文主要介紹了vue動態(tài)修改頁面title的兩種方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
淺談Vue.js應(yīng)用的四種AJAX請求數(shù)據(jù)模式
本篇文章主要介紹了淺談Vue.js應(yīng)用的四種AJAX請求數(shù)據(jù)模式，本文將詳細介紹在Vue應(yīng)用程序中實現(xiàn)AJAX的四個方法，有興趣的可以了解一下2017-08-08