webentwicklung-frage-antwort-db.com.de

create-React-App erstellen mit PUBLIC_URL

Ich versuche 

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

mit einem Projekt, das mit dem neuesten Create-React-Skript erstellt wurde.

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

public/index.html enthält einen ähnlichen Code

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

Stunden der Suche im Internet und Stack-Überlauf zeigen, dass über PUBLIC_URL nur sehr wenig geschrieben wird. Ich habe Create-React-App von Git Hub geklont und habe den Code durchsucht, bin aber noch nicht aufgeklärt worden.

Hat jemand irgendwelche Vorschläge, was ich falsch mache?

24
Gulliver Smith

Wenn die anderen Antworten für Sie nicht funktionieren, gibt es auch ein homepage-Feld in package.json. Nach dem Ausführen von npm run build sollten Sie eine Meldung 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 hinzufügen, z.

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

Nach erfolgreicher Einstellung, entweder über homepage oder PUBLIC_URL, sollten Sie stattdessen eine Meldung wie diese 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.
24
redbmk

So wird die Variable PUBLIC_URL nicht verwendet. Laut 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'} />;
}

Die PUBLIC_URL wird nicht auf einen Wert Ihrer Wahl festgelegt, sondern dient zum Speichern von Dateien in Ihrer Bereitstellung außerhalb des Buildsystems von Webpack.

Um dies anzuzeigen, führen Sie Ihre CRA-App aus und fügen Sie Folgendes zur Datei src/index.js Hinzu:

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

Sie werden sehen, dass die URL bereits existiert.

Lesen Sie mehr in den CRA docs .

12
Toby

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

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

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

5
Dave

Tatsächlich unterscheidet sich die Art und Weise, wie Umgebungsvariablen gesetzt werden, 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

Empfehlen: cross-env

{
  "scripts": {
    "build": "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 -rease-app

3
JimmyLv

Leute wie ich, die so etwas in build suchen: 

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

Die Einstellung von https://dsomething.cloudfront.net auf homepage in package.json funktioniert dann nicht.

1. Schnelle Lösung

Bauen Sie Ihr Projekt so auf:
(Fenster)

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

(Linux) 

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

(Mac)
-- nicht sicher -- 

Und du wirst bekommen

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

in Ihrer erstellten index.html

2. Dauerhafte & empfohlene Lösung

Erstellen Sie eine Datei mit dem Namen .env im Projektstammverzeichnis (an derselben Stelle, an der sich package.json befindet).
In diese Datei schreiben Sie dies (keine Anführungszeichen um die URL):

PUBLIC_URL=https://dsomething.cloudfront.net

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

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

3. Seltsame Lösung

Fügen Sie dies in package.json hinzu
"homepage": " 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 dasselbe wie:

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

nach meinem Verständnis. 

Github AusgabeGithub Kommentar

3
Vaibhav Vishal

Was Sie falsch machen, ist zu erwarten, dass PUBLIC_URL und process.env.PUBLIC_URL denselben Wert haben.

create-React-App hat zwei verschiedene PUBLIC_URL:

  1. Die in der Prozessumgebung oder package.json Homepage.
  2. Die im Knoten process.env.

Die Prozessumgebung PUBLIC_URL überschreibt jede package.json-Homepage. Es kann eine vollständige URL mit Schema, Host und Pfad sein. Der Host würde verwendet werden, um korrekte Anweisungen für die Bereitstellung zu geben.

Die process.env.PUBLIC_URL ist nur der Pfad aus der Prozessumgebung PUBLIC_URL oder der Homepage.

Deshalb, wenn du rennst

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

In Reaktion hast du

process.env.PUBLIC_URL === ''

Wenn du hättest

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

In React hättest du

process.env.PUBLIC_URL === '/foo'
0
Marko Kohtala

Nicht sicher, warum Sie es nicht einstellen können. In source hat PUBLIC_URL Vorrang vor homepage

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.

0
dosentmatter

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

Wie ich das behoben habe,

In meiner Hauptanwendungsdatei mit dem Namen app.tsx, wo ich den Router einbinde. Ich stelle den Basisnamen ein, zB <BrowserRouter basename="/Seans-TypeScript-ReactJS-Redux-Boilerplate/">

Beachten Sie, dass es sich um eine relative URL handelt. Dies vereinfacht die Ausführung lokal und gehostet erheblich. Der Basisname stimmt mit dem Repository-Titel auf GitHub überein. 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/

0
Sean Bradley

Da hier dokumentiert ist, importiert create-react-app nur Umgebungsvariablen, die mit REACT_APP_ beginnen, so dass der PUBLIC_URL, wie er von @redbmk erwähnt wird, aus der homepage-Einstellung in der package.json-Datei stammt.

0
TobyG