問題描述
在使用 Vue 框架編寫前端時，需要加載一個本地 json 文件中的數據。
原來使用原生 HTML 的時候，曾經使用 fetch 來讀取本地文件，優點是不需要引用第三方包：
fetch("./sampleData/project.json")
.then(res => res.json())
.then(data => console.log(data));
fetch 中的 url 屬性是 json 文件與當前 vue 文件的相對路徑。然而這次在 vue 中使用卻報錯了：
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
反復檢查了路徑的拼寫和 json 文件本身，並沒有發現任何不對，何況我的 json 文件中也根本沒有 < 字符。嘗試改了一下路徑中的文件名，發現如果寫一個不存在的文件名，報的錯是完全一致的；因此猜測可能是根本沒有正確訪問到 json 文件。
解決方案
后來發現，fetch 是網頁向前端服務器發起的請求，訪問到的是項目根目錄下的 public 文件夾，並不像在 vue 文件中 import 時一樣使用相對路徑。
因此只需要將想要獲取的文件移動到正確位置即可。例如上文中提到的 url 對應的目錄就是/public/sampleData/project.json。
// 控制台輸出
> {records: Array(34)}