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

Question

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

War*_*ren 5 backbone.js gulp webpack webpack-dev-server

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

直到今天,一切似乎都在起作用(例如我可以去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"]);

Run Code Online (Sandbox Code Playgroud)

这是我的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"],
  },
}

Run Code Online (Sandbox Code Playgroud)

编辑:我刚刚发现我可以直接点击网址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();

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

War*_*ren 11

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

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

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

Run Code Online (Sandbox Code Playgroud)

由于脚本的源是相对路径,因此无法在嵌套URL上找到该脚本.

将源更改为此修复它:

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

归档时间：	10 年，7 月前
查看次数：	4381 次
最近记录：	9 年，7 月前