今天在練手豆瓣電影項目的時候，想要在React項目中fetch本地的json文件卻一直報404。豆瓣API請求有次數限制愤钾，防止訪問過多后無法訪問崖面，就模擬本地數據。
網上的解決方案辟躏，收集了幾點:
- 說地址都是相對于首頁index.html而言，所以將json數據放在相對index.html上就好了。
- 缺少json-loader處理拦止。根本不是，webpack在3之后就不需要json-loader了
- 還是沒有l(wèi)oader,需要在
'./Data/in_theaters.json'前面加上json!'json!./Data/in_theaters.json'
然而并沒有解決問題。網上的解決方案都是基于 create-react-app 的項目汹族，而我的項目是自己集成的環(huán)境萧求。
我的代碼
方法在寫在componentWillMount生命周期函數中
componentWillMount(){
fetch('./Data/in_theaters.json'
).then(response => {
return response.json()
}).then(data => {
console.log(data)
})
}
文件路徑是這樣的：
1.png
結果是這樣的：
2.png
尋找原因
肯定還是路徑問題，那么就和webpack的配置相關顶瞒，Webpack 中的 devServer 配置項就是引起這一切問題的原因夸政，它的功能大概是這樣:
在開發(fā)環(huán)境下，DevServer 提供虛擬服務器榴徐，讓我們進行開發(fā)和調試守问；
提供實時重新加載。與Webpack-DevServer contentBase 這個屬性有關系
webpack里面關于path坑资、publicPath和contentBase的區(qū)別及用法耗帕。
- output里面的path表示的是output目錄對應的一個絕對路徑。
- output里面的publicPath表示的是打包生成的index.html文件里面引用資源的前綴
- devServer里面的publicPath表示的是打包生成的靜態(tài)文件所在的位置（若是devServer里面的publicPath沒有設置盐茎，則會認為是 output里面設置的publicPath的值）
- devServer里面的contentBase表示的是告訴服務器從哪里提供內容兴垦。（只有想提供靜態(tài)文件時才需要）
解決方案
在 webpack.config.js 中
devServer: {
open: true,
port: 3000,
contentBase: path.join(__dirname, 'src'),
hot: true
}
因為我項目的根路徑是src，配置后字柠，重啟服務探越，最后終于拿到了我想要的數據~
3.png
