So konfigurieren Sie einen Pfadalias für das React-Scaffolding

So konfigurieren Sie einen Pfadalias für das React-Scaffolding

Die React-Version beim Schreiben dieses Artikels ist 16.13.1

1 Geben Sie den Befehl npm run eject ein, um ein Konfigurationsverzeichnis im Stammverzeichnis des Projekts zu generieren

2 Öffnen Sie die Datei webpack.config.js unter configg und suchen Sie den folgenden Speicherort

Alias: {
   // Unterstützt React Native Web
   // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
   'reagieren-native': 'reagieren-native-Web',
   // Ermöglicht ein besseres Profiling mit ReactDevTools
   ...(isEnvProductionProfile && {
     'react-dom$': 'react-dom/Profilierung',
     'Scheduler/Tracing': 'Scheduler/Tracing-Profilerstellung',
   }),
   ...(modules.webpackAliases || {}),
},

3 Ändern Sie wie folgt und starten Sie das Projekt neu

Alias: {
   // Unterstützt React Native Web
   // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
   'reagieren-native': 'reagieren-native-Web',
   // Ermöglicht ein besseres Profiling mit ReactDevTools
   ...(isEnvProductionProfile && {
     'react-dom$': 'react-dom/Profilierung',
     'Scheduler/Tracing': 'Scheduler/Tracing-Profilerstellung',
   }),
   ...(modules.webpackAliases || {}),
   // Dateipfadalias '@': path.resolve(__dirname, '../src'),
   '@view': Pfad.auflösen(__dirname, '../src/view'),
},

Konfigurieren Sie den Proxy:

Einfache Versionskonfiguration:

Direkt in package.json hinzufügen: "proxy": "http://localhost:4000"

Vollständige Versionskonfiguration:
(1). Herunterladen: yarn add http-proxy-middleware
(2) Erstellen Sie setupProxy.js im src-Verzeichnis mit folgendem Inhalt:

  const Proxy = erforderlich('http-Proxy-Middleware').
  modul.exporte = funktion(app) {
   app.verwenden(
    proxy.createProxyMiddleware('/api', { //Anfragen mit API müssen weitergeleitet werden. Ziel: 'http://localhost:4000', // Dies ist die Serveradresse changeOrigin: true, //Der Wert ist ein Boolescher Wert. Wenn er wahr ist, wird lokal ein virtueller Server erstellt, der Ihre Anfrage empfängt und die Anfrage in Ihrem Namen sendet.
     Pfad neu schreiben: {'^/api': ''}
    })
   )
  }

3. Hinweis: Nachdem das React-Gerüst mit einem Proxy konfiguriert wurde, werden bei der Anforderung von Ressourcen zuerst die Front-End-Ressourcen angefordert. Wenn keine Ressourcen vorhanden sind, werden die Back-End-Ressourcen angefordert.

Dies ist das Ende dieses Artikels zum Konfigurieren von Pfadaliasen für React-Scaffolding. Weitere Informationen zum Konfigurieren von Pfadaliasen für React-Scaffolding finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • So legen Sie schnell den Dateipfad-Alias ​​in React fest

<<:  Funktionsprinzip und Beispielanalyse des Linux-NFS-Mechanismus

>>:  Detaillierte Analyse des Linux-NFS-Mechanismus anhand von Fällen

Artikel empfehlen

Konfigurieren Sie nginx so, dass es zur Systemwartungsseite umleitet

Letztes Wochenende bereitete sich ein Bruderproje...

Designbeispiele für Dropdown-Menüs und Schiebemenüs

Ich habe viele Websites gefunden, die Dropdown- od...

Detaillierte Schritte zur Installation und Konfiguration von MySQL 5.7

1. MySQL herunterladen 1. Melden Sie sich auf der...

Der Unterschied zwischen HTML-Name-ID und Klasse_PowerNode Java Academy

Name Geben Sie einen Namen für das Tag an. Format...

Integrierte Objekte, Werttypen und Referenztypen in JavaScript-Objekten erklärt

Inhaltsverzeichnis Objekt Objektdefinition Iterie...

Verwenden von Nginx zum Implementieren der Graustufenversion

Unter Graustufenfreigabe versteht man eine Freiga...

JavaScript implementiert Countdown auf Front-End-Webseite

Verwenden Sie natives JavaScript, um den Countdow...

Beispielcode zum Konvertieren des Mysql-Abfrageergebnissatzes in JSON-Daten

Mysql konvertiert Abfrageergebnissatz in JSON-Dat...

So exportieren und importieren Sie SQL-Dateien unter einem Linux-Befehl

Dieser Artikel beschreibt, wie Sie SQL-Dateien mi...

Detaillierte Erläuterung des MySQL-Mechanismus zur gemeinsamen Abfrageoptimierung

Inhaltsverzeichnis Strategie zur Ausführung föder...

Designreferenz Schönes und originelles Blog-Design

Alle unten aufgeführten Blogs sind originell und ...