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

MYSQL METADATA LOCK (MDL LOCK) MDL-Sperrproblemanalyse

1. Einleitung MDL-Sperren in MySQL haben schon im...

Eine kurze Analyse der Verwendung von Rahmen- und Anzeigeattributen in CSS

Einführung in Rahmeneigenschaften border -Eigensc...

Docker führt Vorgänge mit dem angegebenen Speicher aus

wie folgt: -m, --memory Speicherlimit, das Format...

So zählen Sie die Anzahl bestimmter Zeichen in einer Datei unter Linux

Das Zählen der Nummer einer Zeichenfolge in einer...

So füllen Sie Elemente in Spalten im CSS-Rasterlayout

Angenommen, wir haben n Elemente und müssen diese...

Zusammenfassung der Binlog-Nutzung der MySQL-Datenbank (unbedingt lesen)

Ich werde nicht näher darauf eingehen, wie wichti...

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

Ja, gespeicherte MySQL-Prozeduren scheinen sehr s...

Navigationsdesign und Informationsarchitektur

<br />Wenn wir über Navigation sprechen, geh...

Die Rolle von nextTick in Vue und mehrere einfache Anwendungsszenarien

Zweck Verstehen Sie die Rolle von nextTick und me...

Erklärung zur Verwendung von „Ersetzen“ und „Ersetzen in“ in MySQL

„Replace“ und „Replace into“ von MySQL sind beide...

So führen Sie Tomcat-Quellcode im Maven-Modus aus

Vorwort Kürzlich habe ich den Startvorgang von To...