Question

我用Webpack和react-rounter构建了一个项目。这是我的代码：

ReactDOM.render(
    <Provider store={store}>
        <Router history={ browserHistory }>
            <Route path='/' component={ App } >
                <IndexRoute component={ Home } />
                <Route path="purchase" component={ Purchase } />
                <Route path="purchase/:id" component={ Purchase } />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('example')
);

当我请求"http://127.0.0.1:3001/purchase"时，它的工作正常！但地址"http://127.0.0.1:3001/purchase/a"有错误。查看错误消息：enter image description here

我的WebpackDevServer配置是：

new WebpackDevServer (webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    noInfo: false,
    historyApiFallback: true
}).listen(3001, '127.0.0.1', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3001');
    });

我不知道是怎么回事，救救我！

Answer 1

您正在使用相对路径来描述index.html中的bundle.js的路径。

您应该在index.html

中使用bundle.js的绝对路径

绝对路径包含根目录和包含文件或文件夹的所有其他子目录。

如果它与index.html在同一路径中。

例如

public/index.html

public/bundle.js

这可以解决您的问题。

<script src="/bundle.js"></script>

Answer 2

在包含任何适用于我的脚本之前，将<base href="/" />添加到index.html文件的head标记中。

Answer 3

如果碰巧直接使用HtmlWebpackPlugin编辑index.html，则不是。因此，要解决此特定问题，请添加publicPath并将/指定为webpack.config.js中的根文件夹：

const path = require('path')

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  // more config stuff goes below..
}

不要忘记重启webpack开发服务器以使这些更改生效

有关publicPath here的更多信息。

使用Webpack和React-router bundle.js Not Found

3 个答案: