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

Ubuntu 16.04 Installations-Tutorial unter VMware 12

In diesem Artikel finden Sie das Installations-Tu...

Detaillierte Erklärung zur Verwendung der Vue h-Funktion

Inhaltsverzeichnis 1. Verstehen 2. Verwendung 1. ...

Anleitung zum Zurücksetzen des MySQL/MariaDB-Root-Passworts

Vorwort Vergessene Passwörter sind ein Problem, d...

Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3

Inhaltsverzeichnis Vorwort 1. Warum brauchen wir ...

Befehl zum Anzeigen der Erstellungszeit der Binlog-Datei unter Linux

Inhaltsverzeichnis Hintergrund analysieren Verfah...

Einführung in den HTML-Standard für chinesische Zeichenkodierung

In HTML müssen Sie die von der Webseite verwendet...

MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle

Inhaltsverzeichnis 1. Hilfeinformationen nutzen 2...

Interner Ereignisrückruf der Webkomponentenkomponente und Problempunktanalyse

Inhaltsverzeichnis Vorne geschrieben Was genau is...

Drei Vererbungsmethoden in JavaScript

erben 1. Was ist Vererbung? Vererbung: Zunächst e...

Vue verwendet das Video-Tag, um die Videowiedergabe zu implementieren

In diesem Artikel wird der spezifische Code von V...