wake-up-neo.com

Warum zeigt der Build-Build von React Webpack eine leere Seite?

Ich baue eine Reakt-App und im Moment funktioniert webpack-dev-server gut (der hallo-Welt -Text wird angezeigt). Für den Produktionsaufbau Die Registerkarte "Netzwerk" unter den Chrome-Entwicklertools zeigt index.html und index_bundle.js für die Größe 0 B (siehe Bild)  enter image description here Aber das ist eindeutig nicht der Fall. Die HTML-Dateigröße beträgt 227 B & index_bundle.js Die Dateigröße beträgt 195Kb (siehe Bild)  

Auch das Chrome Devtools Elements-Register zeigt Folgendes (siehe Bild)  enter image description here

Meine Webpack-Konfigurationsdatei sieht folgendermaßen aus:  enter image description here

javascriptweb-applicationsreactjswebpackredux
19
jasan

Ich habe es herausgefunden, ich habe browserHistory benutzt, ohne einen lokalen Server einzurichten. Wenn ich es in hashHistory änderte, funktionierte es. Um die Webpack-Produktion lokal mit dem Browserverlauf des reakt-Routers zu testen, musste ich Folgendes tun: Einen Server konfigurieren:

Ihr Server muss bereit sein, echte URLs zu verarbeiten. Wenn die App zum ersten Mal bei/geladen wird, wird sie wahrscheinlich funktionieren. Wenn der Benutzer jedoch umgeht und dann bei/accounts/23 auf Aktualisieren klickt, wird Ihr Webserver eine Anforderung an/accounts/23 erhalten. Sie benötigen es, um diese URL zu verarbeiten und Ihre JavaScript-Anwendung in die Antwort aufzunehmen.

Eine Express-App könnte so aussehen:

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

Und für den Fall, dass sich jemand auf Firebase mit Reakt-Router mit Browserverlauf bereitstellt, führen Sie Folgendes aus:

{
  "firebase": "<YOUR-FIREBASE-APP>",
  "public": "<YOUR-PUBLIC-DIRECTORY>",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}
22
jasan

benutzen 

import { HashRouter } from 'react-router-dom';

anstatt

import { BrowserRouter} from 'react-router-dom';

und vergessen Sie nicht, es in Ihrem Routencode zu ersetzen 

<HashRouter>
  ...
</HashRouter>
3
Yecodeo
<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

basename: string
Die Basis-URL für alle Standorte. Wenn Ihre App von einem Unterverzeichnis auf Ihrem Server bereitgestellt wird, möchten Sie dieses auf das Unterverzeichnis festlegen. Ein ordnungsgemäß formatierter Basisname sollte einen führenden Schrägstrich, aber keinen abschließenden Schrägstrich enthalten.

2
Beans

GitHub Pages unterstützt keine Router, die die HTML5-API pushState history unter der Haube verwenden (z. B. React Router using browserHistory). Dies liegt daran, dass der GitHub Pages Server 404 zurückgibt, wenn für eine URL wie http://user.github.io/todomvc/todos/42 eine neue Seite geladen wird, wobei /todos/42 eine Frontend-Route ist, da er nichts von /todos/42 kennt. Wenn Sie einem auf GitHub Pages gehosteten Projekt einen Router hinzufügen möchten, finden Sie hier einige Lösungen:

  • Sie können von der HTML5-Verlaufs-API zum Routing mit Hashes wechseln. Wenn Sie den React Router verwenden, können Sie für diesen Effekt zu hashHistory wechseln, die URL ist jedoch länger und ausführlicher (z. B. http://user.github.io/todomvc/#/todos/42?_k=yknaj). Lesen Sie mehr über verschiedene historische Implementierungen in React Router.
  • Alternativ können Sie einen Trick verwenden, um GitHub Pages den Umgang mit 404 beizubringen, indem Sie mit einem speziellen Umleitungsparameter zu Ihrer index.html-Seite umleiten. Sie müssen vor dem Bereitstellen des Projekts eine 404.html-Datei mit dem Umleitungscode zum Ordner build hinzufügen, und Sie müssen Code hinzufügen, der den Umleitungsparameter zu index.html verarbeitet. Eine detaillierte Erklärung dieser Technik finden Sie in dieser Anleitung .
1
s4ndhyac