webpack-dev-server搭配react-router找不到资源文件的问题解决
2018-01-24 21:40
981 查看
最近使用webpack3 + react-router4开发一个小项目, 发现使用BrowserRouter时进入到二级url, 如从localhost:8080/ 进入到 localhost:8080/background时本来的资源文件会找不到.
问题的解决方法是所有的资源文件都使用绝对路径, 因为在webpack.config.js配置的是:devServer: {
// 本地服务器所加载页面所在目录
contentBase: './'
}即dev-server读取资源文件时是从./这个目录去读取的, 即webpack.config.js这个配置文件的同目录, 那么引用资源文件的时候最不要使用相对路径而使用绝对路径, 比如<img src="/img/header.jpg">而不要使用相对路径如<img
src="../img/header.jpg">等, 使用相对路径时进入到不同的url则会找不到对应的资源文件.
问题的解决方法是所有的资源文件都使用绝对路径, 因为在webpack.config.js配置的是:devServer: {
// 本地服务器所加载页面所在目录
contentBase: './'
}即dev-server读取资源文件时是从./这个目录去读取的, 即webpack.config.js这个配置文件的同目录, 那么引用资源文件的时候最不要使用相对路径而使用绝对路径, 比如<img src="/img/header.jpg">而不要使用相对路径如<img
src="../img/header.jpg">等, 使用相对路径时进入到不同的url则会找不到对应的资源文件.
相关文章推荐
- vue+webpack解决css引用图片打包后找不到资源文件的问题
- 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
- webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)
- 详解webpack-dev-server使用http-proxy解决跨域问题
- 解决webpack-dev-server对图片缓存的问题
- 解决webpack+Vue引入iView找不到字体文件的问题
- 二。express+webpack+react (主要解决使用jsx文件的问题)
- 解决react+webpack 打包后文件过大的问题
- 解决webpack dev-server不能匹配post请求的问题
- 详解webpack-dev-server 设置反向代理解决跨域问题
- webpack-dev-server 设置反向代理解决跨域问题
- 使用webpack-dev-server设置反向代理解决前端跨域问题
- 解决 webpack-dev-server 不能自动刷新的问题
- webpack和webpack-dev-server安装配置(遇到各种问题的解决方法)
- 六:webpack-dev-server 设置反向代理解决跨域问题
- 创建Spring-Mybatis web项目,解决IDEA下找不到XXXmapper.xml文件的问题
- 解决webpack打包文件过大的问题
- webstorm修改文件,webpack-dev-server不会自动编译刷新
- vue.js 配置webpack-dev-server 的错误解决方法
- webpack-dev-server将文件产出到指定目录