react-routing-dom项目因与webpack捆绑时的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 app。

1. 更改生成webpack的output部分的publicPath: './'配置，例如，如果index.html和捆绑文件位于同一目录中：

   entry: ...
   output: {
       path: path.resolve(__dirname, 'public'),
       filename: '[name].js',
       publicPath: './'
   }

这将允许将捆绑的文件加载到与html相同的目录中，而不是加载到当前Web的根目录（就像publicPath: '/'一样）。

2. 如果在Chrome中进行测试，请在Chrome扩展程序中启用“允许访问文件网址”，描述here。
3. 如果使用路由，请使用HashRouter而不是BrowserRouter（关注react-router v4）。有关详细信息，请参阅this SO answer。