javascript - 与 webpack 捆绑时，react-router-dom 项目因 publicPath 而中断

Question

我正在使用 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 一起正常运行时正常工作？

Answer 1

所以我们开始，如何从 file:/// 运行 React 应用程序。

1. 更改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欲了解更多信息。