今天在练手豆瓣电影项目的时候，想要在React项目中fetch本地的json文件却一直报404。豆瓣API请求有次数限制，防止访问过多后无法访问，就模拟本地数据。
网上的解决方案，收集了几点:
- 说地址都是相对于首页index.html而言，所以将json数据放在相对index.html上就好了。
- 缺少json-loader处理。根本不是，webpack在3之后就不需要json-loader了
- 还是没有loader,需要在
'./Data/in_theaters.json'前面加上json!'json!./Data/in_theaters.json'
然而并没有解决问题。网上的解决方案都是基于 create-react-app 的项目，而我的项目是自己集成的环境。
我的代码
方法在写在componentWillMount生命周期函数中
componentWillMount(){
fetch('./Data/in_theaters.json'
).then(response => {
return response.json()
}).then(data => {
console.log(data)
})
}
文件路径是这样的：
1.png
结果是这样的：
2.png
寻找原因
肯定还是路径问题，那么就和webpack的配置相关，Webpack 中的 devServer 配置项就是引起这一切问题的原因，它的功能大概是这样:
在开发环境下，DevServer 提供虚拟服务器，让我们进行开发和调试；
提供实时重新加载。与Webpack-DevServer contentBase 这个属性有关系
webpack里面关于path、publicPath和contentBase的区别及用法。
- output里面的path表示的是output目录对应的一个绝对路径。
- output里面的publicPath表示的是打包生成的index.html文件里面引用资源的前缀
- devServer里面的publicPath表示的是打包生成的静态文件所在的位置（若是devServer里面的publicPath没有设置，则会认为是 output里面设置的publicPath的值）
- devServer里面的contentBase表示的是告诉服务器从哪里提供内容。（只有想提供静态文件时才需要）
解决方案
在 webpack.config.js 中
devServer: {
open: true,
port: 3000,
contentBase: path.join(__dirname, 'src'),
hot: true
}
因为我项目的根路径是src，配置后，重启服务，最后终于拿到了我想要的数据~
3.png
