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.html
werden 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?
javascript
reactjs
create-react-app
Gulliver Smith
quelle
quelle
Antworten:
Wenn die anderen Antworten für Sie nicht funktionieren, gibt es auch ein
homepage
Feld inpackage.json
. Nach dem Ausführennpm run build
sollten 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.json
z{ // ... "scripts": { // ... }, "homepage": "https://example.com" }
Wenn es erfolgreich eingestellt wurde, entweder über
homepage
oderPUBLIC_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.
quelle
homepage
PUBLIC_URL
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.net
aufhomepage
inpackage.json
nicht.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
.env
Ihres 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
quelle
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.js
Datei hinzu:console.log('public url: ', process.env.PUBLIC_URL)
Sie sehen, dass die URL bereits vorhanden ist.
Lesen Sie mehr in den CRA-Dokumenten .
quelle
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
quelle
npm start
imbuild
Skript?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 -
quelle
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/
quelle
Ich bin mir nicht sicher, warum Sie es nicht einstellen können. In der Quelle ,
PUBLIC_URL
hat 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.
quelle
Wie hier dokumentiert , importiert create-react-app nur Umgebungsvariablen, die mit beginnen
REACT_APP_
, daher stammt diePUBLIC_URL
, wie von @redbmk erwähnt, meiner Meinung nach aus derhomepage
Einstellung in derpackage.json
Datei.quelle