我正在使用 React-router-dom 开发一个项目。
在我的 webpack 中设置:
output: {
filename: 'app.js',
path: path.join(__dirname, 'dist'),
publicPath: '/'
},
devServer: {
historyApiFallback: true
}...
我需要 publicPath
为 "/"
才能使路由正常工作(除非我错了)
当我使用webpack-dev-server --inline --hot --process
运行项目时,
一切正常。
但是当我尝试构建并捆绑它时,我收到此错误:
index.html:11 GET file:///C:/app.js net::ERR_FILE_NOT_FOUND
您知道配置它的正确方法是什么吗,这样构建就可以在项目与 webpack-dev-server 一起正常运行时正常工作?
最佳答案
所以我们开始,如何从 file:///
运行 React 应用程序。
更改
output
部分的webpack
配置,使publicPath: './'
,例如,如果index.html html
和捆绑文件位于同一目录中:entry: ... output: { path: path.resolve(__dirname, 'public'), filename: '[name].js', publicPath: './' }
这将允许在与 html 相同的目录中加载捆绑文件,而不是在当前 Web 的根目录中(如 publicPath: '/'
的情况)。
- 如果在 Chrome 中进行测试,请在 Chrome 扩展程序中启用“允许访问文件 URL”,如 here 所述.
- 如果使用路由,请使用
HashRouter
而不是BrowserRouter
(涉及react-router
v4)。请参阅this SO answer欲了解更多信息。
关于javascript - 与 webpack 捆绑时,react-router-dom 项目因 publicPath 而中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47982469/