Webpack dev sunucusu iç içe URL'leri yükleyemiyor (GET 404 hatası)

Şu anda bir webpack-dev sunucusu ve bir omurga yönlendiricisi kullanan bir site kuruyorum.Webpack dev sunucusu iç içe URL'leri yükleyemiyor (GET 404 hatası)

Bugüne kadar her şey örneğin benim ana sayfası için http://localhost:3333 gidebiliriz ve http://localhost:3333/login benim giriş sayfası için.

Ama bugün benim ilk iç içe url, http://localhost:3333/people/1 gitmeye çalıştı ve (çalışıyor gibi görünüyordu benim konsol 404 GET hatası atmak

tam hata şuydu:.. http://localhost:3333/people/build/bundle.js 404 (Not Found)

benim webpack sunucusu yanlış dizin altında sunucuya doğru dosyalara bakmak için çalışıyor gibi görünüyor bu doğru ise, Hiç bir fikrim yok Bunu nasıl düzeltebilirim. Diğer yığın taşma sorularına ve github sorunlarına baktım, ama boşuna. Düşüncesi olan var mı?

Sunucuyu gulp kullanarak başlatıyorum.

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"], 
    }, 
}

Düzenleme::

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"]);

İşte benim webpack yapılandırma dosyasıdır: Ben sadece doğrudan beklendiği gibi http://localhost:3333/#/people/1 veya http://localhost:3333/#people/1 ve her şey çalışıyor URL'ler isabet aldığını saptadık İşte benim gulpfile olduğunu.

Url'deki pound sembolünü içermeme izin verecek bir ayar var mı? Umarım bu soruya daha fazla bağlam sağlamaya yardımcı olur.

Takip: Bir omurga yönlendiricisini başlatan ve Backbone.history.start({ pushState: true }) numaralı telefonu arayarak global App bileşenim var. İşte bir kod snippet'i. yapıcı metotta console.log fark ederseniz

class App { 

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

module.exports = new App();

, bu işleyebilen olmayan iç içe sayfalarda ama o yapamaz iç içe sayfalarda denir.

kaynak

2015-05-03 Warren

Son olarak sorunumun cevabını buldum. Bu gibi görünürdü her sayfada yüklendi

Benim index.html dosyası: script kaynak göreli bir yol olduğu için

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

, script iç içe url'lerde bulunamadı.Bu soru zaten yanıtlandı biliyoruz

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

kaynak

2015-05-04 05:57:18 Warren

En belirgin hatalar bazen yakalanması en zor olanlardır. Bana zaman ve hayal kırıklığı için teşekkür ederiz :) – Pandaiolo

Url'de pound sembolünü içermeme izin verecek bir ayar var mı?

Bu WebPack ile ancak uygulama yönlendirme işleme biçimi ile ilgisi yoktur. Eğer Backbone geçmişini kullanıyorsanız

// 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); 
});

, kontrol this paragraph

yılında "devlet itmek": Ne React-Router kullanıyor şüpheleniyorsanız ve kod bloğunda

What's it look like?

başlıklı bölüm altında görünmelidir

kaynak

2015-05-04 04:38:11

teşekkürler. ': Şu anda arıyorum aslında' Backbone.history.start ({gerçek pushState}) bir omurga yönlendirici kullanıyorsanız ve ediyorum. Bunu global 'App' bileşenim olarak adlandırıyorum. Sorumu bunu yansıtmak için düzenledim! – Warren

Hala karmalık alıyorsunuz? Eski IE kullanıyor musunuz? Backbone.history.start ({pushState: true, hashChange: false}) çalıştı. –

Krom kullanma. Öneri için teşekkürler, ama işe yaramıyor. Ne olduğunu ben alıyorum konsol hata ile ilgisi var 'http: // localhost: 3333/insanlar/build/bundle.js 404' (Bulunamadı)./Build/bundle.js'nin '/ people' altındaki kapsamı da size yanlış mı geliyor? – Warren

ama aynı sorun vardı ve benim durum paylaşmak istedim: Buna kaynağının değiştirilmesi

düzelttim. Tıpkı Warren'ın seçtiği çözüm gibi, hata benim index.html'mindi. Başlangıçta bu gibi görünüyordu:

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

Ben burada listelenen çözüm yoluna dolu koymak gördüm ama yerel hem üretimde bu yayınlanmasını istediğiniz çünkü benim için çalışmaz. Ben sadece şöyle görünmek için değiştirdim: ('.') Kaldırıldı. (0 kaldırıldı). cevap için

kaynak

2016-05-16 04:27:34 jmancherje

Webpack dev sunucusu iç içe URL'leri yükleyemiyor (GET 404 hatası)

cevap

İlgili konular