Konnte nicht korrekte statische Dateien nach dem Auffrischen außer der Indexseite erhalten

Question

Wenn ich Seite auf Indexroute (/) und Anmeldeseite (/login) aktualisiere, funktioniert es gut.

Allerdings wird meine Website Fehler, wie ich auf anderen Routen aktualisieren, zum Beispiel /user/123456.

Da egal, was die Anfrage ist, erhält der Browser immer HTML-Datei.
So sind beide der Inhalt in main.css und main.js HTML, und der Browser Fehler.

Ich habe bereits die Readme von create-reagieren-App.
Ob ich serve Paket ($serve -s build -p 80) oder Express verwende, wird es den seltsamen Fehler erzeugen.

Folgende ist mein Server-Code:

//server.js 
const express = require('express'); 
const path = require('path'); 
app.use(express.static(path.join(__dirname, 'build'))); 
app.get('/*', (req, res) => { 
    res.sendFile(path.join(__dirname, 'build', 'index.html')); 
}); 
const PORT = process.env.PORT || 80; 
app.listen(PORT,() => { 
    console.log(`Production Express server running at localhost:${PORT}`); 
}); 

Edit: Ich habe herausgefunden, wo das Problem verursacht hat.
Ich habe ein neues Projekt erstellt und es mit meinem verglichen. Der Pfad der statischen Dateien im neuen Projekt ist absolut, aber in meinem Projekt ist relativ.
Als Ergebnis lösche ich "homepage": "." in package.json.

//package.json 
{ .... 
    dependencies:{....}, 
    ...., 
- "homepage": "." 
} 

Alles funktioniert wie erwartet jetzt. Wie bin ich sorglos ...

Answer 1

Ich habe herausgefunden, wo das Problem verursacht wurde. Ich habe ein neues Projekt erstellt und es mit meinem verglichen. Der Pfad der statischen Dateien im neuen Projekt ist absolut, aber in meinem Projekt ist relativ. Als Ergebnis lösche ich "homepage": "." im package.json.

//package.json 
{ .... 
dependencies:{....}, 
...., 
- "homepage": "." 
} 

Alles funktioniert jetzt wie erwartet. Wie bin ich sorglos ...

Answer 2

Wenn Ihre Route /user/** nach app.get('/*', ... definiert ist, stimmt es möglicherweise nicht überein, weil /* alle Anforderungen erhält und Sie index.html zurückgibt. Versuchen Sie ohne die * oder deklarieren Sie die anderen Routen vor.

Answer 3

Zuerst dachte ich, Sie haben den Server Teil falsch verstanden. In Ihrem Fall verwenden Sie serve als Ihren Server. Dies ist ein statischer Server, der von [serve] bereitgestellt wird. Wenn Sie Ihre eigene server.js verwenden möchten, sollten Sie node server.js oder node server ausführen.

Ich habe auch die gleichen Dinge mit dir gemacht und habe dieses Problem nicht. Die folgenden sind, was ich tat:

1. create-react-app my-app
2. npm run build
3. sudo serve -s build -p 80 (sudo für Port unter 1024)

Und ich habe die Ergebnisse:

/user/321

ICH Ich vermute, Sie vergessen vielleicht, das Skript zu erstellen.Sie können die folgenden versuchen:

1. build/ Ordner
2. Lauf npm run build wieder

---

Advise entfernen: Wenn Sie auf Front-End konzentrieren möchten, können Sie einfach [dienen] verwenden. Es wird Ihnen leicht fallen, sich auf das zu konzentrieren, was Sie brauchen.