Mit benutzerdefinierten PUBLIC_URL kann kein Create-React-App-Projekt erstellt werden

Ich versuche

PUBLIC_URL=http://example.com npm run build

mit einem Projekt, das mit dem neuesten Skript zum Erstellen und Reagieren erstellt wurde.

Die Vorkommen von %PUBLIC_URL%in public/index.htmlwerden jedoch durch eine leere Zeichenfolge ersetzt, nicht durch den erwarteten Wert PUBLIC_URL.

public/index.html enthält Code wie

<script src="%PUBLIC_URL%/static/js/jarvis.widget.min.js"></script>

Stundenlanges Durchsuchen des Internets und Stapelüberlauf zeigen, dass nur sehr wenig darüber geschrieben wird PUBLIC_URL. Ich habe die create-react-app von GitHub geklont und den Code durchsucht, bin aber noch nicht aufgeklärt worden.

Hat jemand Vorschläge, was ich falsch mache?

Wenn die anderen Antworten für Sie nicht funktionieren, gibt es auch ein homepageFeld in package.json. Nach dem Ausführen npm run buildsollten Sie eine Nachricht wie die folgende erhalten:

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

Sie würden es einfach als eines der Stammfelder in package.jsonz

{
  // ...
  "scripts": {
    // ...
  },
  "homepage": "https://example.com"
}

Wenn es erfolgreich eingestellt wurde, entweder über homepageoder PUBLIC_URL, sollten Sie stattdessen eine Nachricht wie folgt erhalten:

The project was built assuming it is hosted at https://example.com.
You can control this with the homepage field in your package.json.

Leute wie ich, die nach so etwas in Build suchen:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

Dann funktioniert das Einstellen https://dsomething.cloudfront.netauf homepagein package.jsonnicht.

1. Schnelle Lösung

Erstellen Sie Ihr Projekt folgendermaßen:
(Windows)

set PUBLIC_URL=https://dsomething.cloudfront.net&&npm run build

(Linux / Mac)

PUBLIC_URL=https://dsomething.cloudfront.net npm run build

Und du wirst bekommen

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

in Ihrer erstellten index.html

2. Permanente und empfohlene Lösung

Erstellen Sie eine Datei mit dem Namen .envIhres Projektstamms (dieselbe Stelle, an der sich package.json befindet).
Schreiben Sie in diese Datei Folgendes (keine Anführungszeichen um die URL):

PUBLIC_URL=https://dsomething.cloudfront.net

Erstellen Sie Ihr Projekt wie gewohnt ( npm run build).
Dadurch wird auch index.html generiert mit:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

3. Seltsame Lösung (funktioniert nicht in der neuesten React-Scripts-Version)

Fügen Sie dies in Ihre package.json
"Homepage" ein: "http: //: //dsomething.cloudfront.net",

Dann wird index.html generiert mit:

<script type="text/javascript" src="//dsomething.cloudfront.net/static/js/main.ec7f8972.js">

Welches ist im Grunde das gleiche wie:

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

nach meinem Verständnis.

Github-Ausgabe Github-Kommentar

So wird die Variable PUBLIC_URL nicht verwendet. Gemäß der Dokumentation können Sie die PUBLIC_URL in Ihrem HTML verwenden:

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Oder in Ihrem JavaScript:

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

Mit PUBLIC_URL können Sie keinen Wert Ihrer Wahl festlegen, sondern Dateien in Ihrer Bereitstellung außerhalb des Build-Systems von Webpack speichern.

Um dies anzuzeigen, führen Sie Ihre CRA-App aus und fügen Sie diese der src/index.jsDatei hinzu:

console.log('public url: ', process.env.PUBLIC_URL)

Sie sehen, dass die URL bereits vorhanden ist.

Lesen Sie mehr in den CRA-Dokumenten .

Tatsächlich unterscheidet sich die Art und Weise der Einstellung von Umgebungsvariablen zwischen verschiedenen Betriebssystemen.

Windows (cmd.exe)

set PUBLIC_URL=http://xxxx.com&&npm start

(Hinweis: Das Fehlen von Leerzeichen ist beabsichtigt.)

Linux, macOS (Bash)

 PUBLIC_URL=http://xxxx.com npm start

Empfohlen: cross-env

{
  "scripts": {
    "serve": "cross-env PUBLIC_URL=http://xxxx.com npm start"
  }
}

ref: create-react-app / README.md # Hinzufügen von temporären Umgebungsvariablen in Ihrer Shell bei master · facebookincubator / create-react-app

Schauen Sie sich die Dokumentation an . Sie können eine .env-Datei haben, die die PUBLIC_URL aufnimmt

Obwohl Sie sich daran erinnern sollten, wofür es verwendet wird -

Sie können diese Variable verwenden, um zu erzwingen, dass Assets wörtlich auf die von Ihnen angegebene URL verwiesen werden (Hostname enthalten). Dies kann besonders nützlich sein, wenn Sie ein CDN zum Hosten Ihrer Anwendung verwenden.

Dieses Problem tritt auf, wenn Sie versuchen, eine Reaktions-App auf Github-Seiten zu hosten.

Wie ich das behoben habe,

In meiner Hauptanwendungsdatei, genannt app.tsx, wo ich den Router einbinde. Ich setze den Basisnamen, z. <BrowserRouter basename="/Seans-TypeScript-ReactJS-Redux-Boilerplate/">

Beachten Sie, dass es sich um eine relative URL handelt. Dies vereinfacht die lokale und gehostete Ausführung vollständig. Der Basisnamenwert entspricht dem Repository-Titel auf GitHub. Dies ist der Pfad, den GitHub-Seiten automatisch erstellen.

Das ist alles was ich tun musste.

Siehe Arbeitsbeispiel auf GitHub-Seiten unter

https://sean-bradley.github.io/Seans-TypeScript-ReactJS-Redux-Boilerplate/

Ich bin mir nicht sicher, warum Sie es nicht einstellen können. In der Quelle , PUBLIC_URLhat Vorrang vorhomepage

const envPublicUrl = process.env.PUBLIC_URL;
...
const getPublicUrl = appPackageJson =>
  envPublicUrl || require(appPackageJson).homepage;

Sie können versuchen, Haltepunkte in ihrem Code festzulegen, um festzustellen, welche Logik Ihre Umgebungsvariable überschreibt.

Wie hier dokumentiert , importiert create-react-app nur Umgebungsvariablen, die mit beginnen REACT_APP_, daher stammt die PUBLIC_URL, wie von @redbmk erwähnt, meiner Meinung nach aus der homepageEinstellung in der package.jsonDatei.