Was ist der Grund für den weißen Bildschirm?

Der Grund für den weißen Bildschirm in React ist, dass das HtmlWebpackPlugin-Plugin einen relativen Pfad einführt. Die Lösung ist: 1. Fügen Sie publicPath zur Ausgabekonfiguration hinzu. 2. Legen Sie im Verlaufsmodus HistoryApiFallback fest zu wahr.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was ist der Grund für den weißen Bildschirm in der Reaktion?

Problem mit weißem Bildschirm im React-History-Modus

Als ich React erneut verwendet habe, habe ich kürzlich den Routing-Modus auf History umgestellt, weil ich keinen hässlichen Hash verwenden wollte, was zu einigen Problemen führte, z. B. bei der Aktualisierung Der weiße Bildschirm und das Bild können nicht geladen werden. Hier sprechen wir über die Lösung.

Ursache

Lassen Sie uns zunächst über die Gründe für diese Reihe von Phänomenen sprechen.

Es gibt kein Problem, wenn wir die Seite unter dem Pfad http://localhost:xxxx/ aktualisieren. Wenn wir jedoch zu einem Submodul wechseln, ist der Bildschirm beim Aktualisieren weiß.

Wir sehen, dass auf dem aktuellen Pfad nach bundle.js gesucht wird. Denn wenn uns das HtmlWebpackPlugin-Plugin bei der Einführung von bundle.js hilft, führt es einen relativen Pfad ein, sodass beim Aktualisieren relativ zur aktuellen URL gesucht wird.

Lösung

Sobald der Grund klar ist, ist die Lösung fertig. Wir müssen nur eine Möglichkeit finden, den Ladepfad von bundle.js beim Aktualisieren im Stammverzeichnis beginnen zu lassen, anstatt der aktuellen URL zu folgen.

1. PublicPath zur Ausgabekonfiguration hinzufügen

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

Was bedeutet publicPath? Auf der offiziellen Website gibt es einen solchen Satz: Der Webpack-Dev-Server verwendet standardmäßig auch publicPath als Basis und entscheidet damit, in welchem ​​Verzeichnis der Dienst auf die vom Webpack ausgegebenen Dateien zugreifen kann.

Einfaches Verständnis: Ihre statischen Ressourcen werden von diesem Pfad geladen

publicPath: "/" //Ladepfad '/assets/js/bundle.js'

Auf diese Weise beginnt jede Aktualisierung mit dem Laden aus dem Stammverzeichnis , wir werden unsere bundle.js nicht verlieren. Das gleiche Problem tritt auf, wenn Bilder nicht geladen werden können. 2. HistoryApiFallback von Webpack-Dev-Server Wenn es weitere Gründe gibt, können Sie diese gerne hinzufügen.

ps: Nachdem das Projekt auf dem Server bereitgestellt wurde, ist der Seitenbildschirm weiß und im Hintergrund müssen relevante Einstellungen vorgenommen werden, auf die hier nicht eingegangen wird.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist der Grund für den weißen Bildschirm?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!