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:///运行反应应用程序。

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

这将允许将捆绑的文件加载到与html相同的目录中，而不是加载到当前Web的根目录（就像entry: ... output: { path: path.resolve(__dirname, 'public'), filename: '[name].js', publicPath: './' }}那样。

如果在Chrome中进行测试，请在Chrome扩展程序中启用“允许访问文件网址”，并说明here。
如果使用路由，请使用publicPath: '/'代替HashRouter（关注BrowserRouter v4）。有关详细信息，请参阅this SO answer。

react-routing-dom项目因与webpack捆绑时的publicPath而中断

1 个答案: