Webpack dev服務器無法加載嵌套的網址（GET 404錯誤）

我目前正在設置一個使用webpack-dev-server和骨幹路由器的站點。Webpack dev服務器無法加載嵌套的網址（GET 404錯誤）

直到今天，一切似乎是工作（例如我可以去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，一切按預期工作。

是否有一個設置，可以讓我不必在url中包含磅符號？希望這有助於給我的問題提供更多的背景。

跟進：我有一個全球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，這就是所謂的能夠使非嵌套頁，但不能在嵌套頁面不了的。

來源

2015-05-03 Warren

我終於找到了我的問題的答案。已加載使用看起來像這樣在每個頁面上

我的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>

來源

2015-05-04 05:57:18 Warren

最明顯的錯誤有時是最難捕捉到的。感謝您節省我的時間和挫折:) – Pandaiolo

是否有一個設置，可以讓我不必在url中包含磅符號？

這與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); 
});

如果使用的是骨幹歷史，簽入this paragraph

「推狀態」

來源

2015-05-04 04:38:11

感謝您的回覆。我目前使用的是骨幹路由器，實際上是調用'Backbone.history.start（{pushState：true}）''。我在我的全局'App'組件中調用了這個。我編輯了我的問題來反映這一點！ – Warren

你仍然得到散列？使用舊的IE？嘗試過'Backbone.history.start（{pushState：true，hashChange：false}）。'？ –

使用chrome。感謝您的建議，但它不起作用。我認爲它與我得到的控制檯錯誤是'http：// localhost：3333/people/build/bundle.js 404（Not Found）'。 '/ people'下'/ build/bundle.js'的範圍看起來是否錯誤？ – Warren

我知道這個問題已經回答了，但我有完全相同的問題，我想我會分享我的情況。就像Warren選擇的解決方案一樣，該錯誤在我的index.html上。它原本是這樣的：

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

我看到這裏列出的解決方案把完整路徑，但不會爲我工作，因爲我想在本地和生產運行此。我只是改變它看起來像這樣:(刪除'。'）

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

它完全修復了我的bug。

來源

2016-05-16 04:27:34 jmancherje

Webpack dev服務器無法加載嵌套的網址（GET 404錯誤）

回答

相關問題