首頁 web前端 js教程 Vue-cli專案取得本地json檔案資料的實例

Vue-cli專案取得本地json檔案資料的實例

May 31, 2018 pm 05:39 PM
javascript json vue-cli

下面我就為大家分享一篇Vue-cli專案取得本地json檔案資料的實例,具有很好的參考價值,希望對大家有幫助。

在自己做的vue demo專案中,我想透過在本地添加一些json數據,寫到json檔案中,並且透過非同步請求獲取到,然後載入數據。

axios.get('http://localhost:8080/datas/json')
登入後複製

然而在這過程中,我的訪問總是404.透過查閱,我發現,在vue-cli基礎上構建的項目中,只有static目錄才是vue-cli向外暴露的靜態資料資料夾,我放在static下的圖片可以正常存取到,我是在static同級目錄新建了datas目錄,將json檔案放入datas目錄,請求總是404,當我將json檔案放到static目錄下後,就可以正常存取了。

這項特性一定要記住:

static目錄是vue-cli向外暴露的靜態資料夾,所有靜態資料都應該要放到static目錄中! !

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

vue2.0模擬錨點的實例

vue的mixins屬性詳解

vue2.0路由切換後頁面滾動位置不變BUG的解決方法

以上是Vue-cli專案取得本地json檔案資料的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

PHP 數組轉 JSON 的效能最佳化技巧 PHP 數組轉 JSON 的效能最佳化技巧 May 04, 2024 pm 06:15 PM

PHP數組轉JSON的效能最佳化方法包括:使用JSON擴充和json_encode()函數;新增JSON_UNESCAPED_UNICODE選項以避免字元轉義;使用緩衝區提高循環編碼效能;快取JSON編碼結果;考慮使用第三方JSON編碼庫。

MySQL5.7和MySQL8.0的差別是什麼? MySQL5.7和MySQL8.0的差別是什麼? Feb 19, 2024 am 11:21 AM

MySQL5.7和MySQL8.0是兩個不同的MySQL資料庫版本,它們之間有以下一些主要差異:效能改進:MySQL8.0相對於MySQL5.7有一些效能改進。其中包括更好的查詢優化器、更有效率的查詢執行計劃產生、更好的索引演算法和平行查詢等。這些改進可以提高查詢效能和整體系統效能。 JSON支援:MySQL8.0引入了對JSON資料類型的原生支持,包括JSON資料的儲存、查詢和索引。這使得在MySQL中處理和操作JSON資料變得更加方便和有效率。事務特性:MySQL8.0引進了一些新的事務特性,如原子

Jackson庫中註解如何控制JSON序列化和反序列化? Jackson庫中註解如何控制JSON序列化和反序列化? May 06, 2024 pm 10:09 PM

Jackson庫中的註解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略屬性@JsonProperty:指定名稱@JsonGetter:使用獲取方法@JsonSetter:使用設定方法反序列化:@JsonIgnoreProperties:忽略屬性@ JsonProperty:指定名稱@JsonCreator:使用建構子@JsonDeserialize:自訂邏輯

Pandas使用教學:讀取JSON檔案的快速入門 Pandas使用教學:讀取JSON檔案的快速入門 Jan 13, 2024 am 10:15 AM

快速入門:Pandas讀取JSON檔案的方法,需要具體程式碼範例引言:在資料分析和資料科學領域,Pandas是一個重要的Python庫之一。它提供了豐富的功能和靈活的資料結構,能夠方便地對各種資料進行處理和分析。在實際應用中,我們經常會遇到需要讀取JSON檔案的情況。本文將介紹如何使用Pandas來讀取JSON文件,並附上特定的程式碼範例。一、Pandas的安裝

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

深入了解PHP:JSON Unicode轉中文的實作方法 深入了解PHP:JSON Unicode轉中文的實作方法 Mar 05, 2024 pm 02:48 PM

深入了解PHP:JSONUnicode轉中文的實作方法在開發中,我們經常會遇到需要處理JSON資料的情況,而JSON中的Unicode編碼在一些場景下會為我們帶來一些問題,特別是當需要將Unicode編碼轉換為中文字元時。在PHP中,有一些方法可以幫助我們實現這個轉換過程,以下將介紹常用的方法,並提供具體的程式碼範例。首先,讓我們先來了解一下JSON中Un

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

PHP 數組轉 JSON 的快捷技巧 PHP 數組轉 JSON 的快捷技巧 May 03, 2024 pm 06:33 PM

PHP陣列可透過json_encode()函數轉換為JSON字串(例如:$json=json_encode($array);),反之亦可用json_decode()函數從JSON轉換為陣列($array=json_decode($json);) 。其他技巧還包括:避免深度轉換、指定自訂選項以及使用第三方程式庫。

See all articles