vue cli工程中的本地資料介面

2021-09-29 07:21:02 字數 1830 閱讀 8406

使用vue cli新建的專案中,我需要使用本地資料進行測試,於是寫了下面的資料請求:

let url =

'/src/assets/city.json'

fetch

(url)

.then

(response =>).

then

(data =>

)

npm run serve後,執行到這個請求後報錯,報錯如下:

uncaught (in promise) syntaxerror: unexpected token < in json at position 0

報語法錯誤,但我檢查資料檔案沒問題的,並且上面的**在非工程下是可以正常執行。於是嘗試了以下方法:

1)嘗試包資料檔案放到其它目錄下,還是包同樣的錯。

2)放到靜態檔案目錄(我使用的是vue cli新版,初始化後沒有static目錄,新建了乙個),同樣報錯。

vue cli 新建工程後,vue.config.js檔案並不存在,可以在專案根目錄下手動建立乙個

vue.config.js中的配置,可以參考:

言歸正傳,再來回到上面資料請求的問題

express 是乙個簡潔而靈活的 node.js web應用框架,這裡需要利用這個框架的作為後台資料伺服器。如果專案中沒有安裝,可以先npm安裝下

npm

install express

首先,在檔案頭部,module.exports 之前新增以下內容

const express =

require

('express'

)express()

require

('./assets/api/city.json'

)let apiroutes = express.

router()

use(

'/api'

, apiroutes)

為了方便管理介面,我在 /src/assets 目錄下,新建乙個api資料夾,然後把資料檔案 city.json 放進去。

其次,修改devserver

,// 配置自動啟動瀏覽器

before)}

)}介面配置到此就可以了,然後在專案就中可以使用 /api/city 介面,請求city.json這個本地資料檔案了

fetch

('/api/city').

then

(response =>).

then

(data =>

)

結果如下

vue cli 獲取本地資料

使用vue讀取本地json檔案需要安裝vue resource外掛程式,然後使用它的 http.get來讀取json檔案。json檔案應該是必須放在static目錄下 然後使用npm install 命令安裝vue resource,太慢的話就使用 映象安裝,安裝完成後先引用這個元件。在main.j...

vuecli中的技巧

所有的元件都在components資料夾,根據需求可以在components中新建資料夾 在comments上右鍵,新建檔案,起名為元件名.vue 在父元件中,引入想要使用的子元件。盡量將起的名字和元件名保持一致 import 元件配置物件名 from vue的路徑 在父元件的元件配置物件中,進行元...

Vue cli中的跳轉

寫法一 這裡的name是在vue路由裡面的 寫法二 push與replace用法一樣,都是跳轉到指定網頁 區別 this.router.push path this.router.push this.router.push 向前或者向後跳轉n個頁面,n可為正整數或負整數 this.router.go...