Question

我目前正在建立一个使用webpack-dev-server和骨干路由器的站点。

直到今天，一切似乎都有效（例如我可以转到http://localhost:3333获取主页，http://localhost:3333/login转到我的登录页面。

但今天我尝试转到我的第一个嵌套网址http://localhost:3333/people/1，我的控制台抛出了404 GET错误。

确切的错误是这样的： http://localhost:3333/people/build/bundle.js 404 (Not Found)

似乎我的webpack服务器正在尝试在错误的目录下查找到服务器的正确文件。如果这是正确的，我不知道如何解决这个问题。我已经看过其他堆栈溢出问题和github问题，但无济于事。有什么想法吗？

我使用gulp启动服务器。这是我的gulpfile：

var gulp = require("gulp");
var webpack = require("webpack");
var server = require("webpack-dev-server");
var config = require("./webpack.config");

gulp.task("serve", function() {
  new server(webpack(config), {
    publicPath: config.output.publicPath,
    historyApiFallback: true,
    hot: true,
    quiet: false,
    stats: { colors: true, progress: true },
  }).listen(3333, "localhost", function (err, result) {
    if (err) {
      console.log(err);
    } else {
      console.log("Listening at localhost:3333!");
    }
  });
});

gulp.task("default", ["serve"]);

这是我的webpack配置文件：

var webpack = require("webpack");

module.exports = {
  entry: [
    __dirname + "/app/app.js",
    "webpack/hot/dev-server",
    "webpack-dev-server/client?http://localhost:3333/",
  ],
  output: {
    path: __dirname + "/build",
    filename: "bundle.js",
    publicPath: "http://localhost:3333/",
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      { test: /\.jsx$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      { test: /\.scss$/, exclude: /node_modules/, loader: "style!css!sass" },
    ]
  },
  resolve: {
    root: __dirname,
    extensions: ["", ".js", ".jsx"],
  },
}

编辑：我刚刚发现我可以直接点击网址http://localhost:3333/#/people/1或http://localhost:3333/#people/1，一切都按预期工作。

是否有设置允许我不必在网址中包含井号？希望这有助于为我的问题提供更多背景信息。

跟进：我有一个全局App组件，用于初始化骨干路由器并调用Backbone.history.start({ pushState: true })。这是一段代码片段。

class App {

  constructor() {
    console.log("starting up");
    this.Router = new Router();
    Backbone.history.start({ pushState: true });
  }
}

module.exports = new App();

如果您在构造函数中注意到console.log，则会在非嵌套页面上调用此页面，这些页面可以呈现但不能在不能嵌套的页面上调用。

Answer 1

我终于找到了问题的答案。

我在每个页面上加载的index.html文件看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <script type="text/javascript" src="./build/bundle.js" charset="utf-8"></script>
  </body>
</html>

由于脚本的来源是相对路径，因此无法在嵌套网址上找到该脚本。

将源更改为固定它：

<script type="text/javascript" src="http://localhost:3333/build/bundle.js" charset="utf-8"></script>

Answer 2

是否有设置允许我不必在网址中包含英镑符号？

这与webpack无关，但与应用程序处理路由的方式有关。我怀疑您使用的是React-Router，您应该查看标题为

的部分

What's it look like?

在代码块中：

// Or, if you'd like to use the HTML5 history API for cleaner URLs:

Router.run(routes, Router.HistoryLocation, function (Handler) {
   React.render(<Handler/>, document.body);
});

如果您使用的是Backbone历史记录，请检查＆＃34;推送状态＆＃34;在this paragraph

Answer 3

我知道这个问题已经得到解答，但我遇到了同样的问题，我想我会分享我的情况。就像Warren选择的解决方案一样，这个bug出现在我的index.html上。它最初看起来像这样：

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

我看到这里列出的解决方案放在完整路径中，但这对我不起作用，因为我想在本地和生产中运行它。我只是把它改成这样:(删除'。'）

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

它完全修复了我的错误。

Webpack dev服务器无法加载嵌套URL（GET 404错误）

3 个答案: