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

Installationsschritte für das grafische MySQL-Verwaltungstool Navicat

Inhaltsverzeichnis Vorwort 1. Stellen Sie das Ins...

JS Asynchronous Stack Tracing: Warum „await“ besser ist als „Promise“

Überblick Der grundlegende Unterschied zwischen a...

Einführung in RHCE-Bridging, passwortfreie Anmeldung und Portnummernänderung

Inhaltsverzeichnis 1. Konfigurieren Sie Bridging ...

Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm

Um die Anforderungen effizient zu erfüllen und au...

Tutorial zur Verwendung des Hyperlink-Tags in HTML

Die verschiedenen HTML-Dokumente der Website sind...

Beispielcode für die Konvertierung von MySQL-Zeilen und -Spalten

1. Nachfrage Wir haben drei Tabellen. Wir müssen ...

Ein super detailliertes Vue-Router Schritt-für-Schritt-Tutorial

Inhaltsverzeichnis 1. Router-Ansicht 2. Router-Ve...

Detailliertes Tutorial zur Installation von MySQL 5.7.26 auf CentOS7.4

In CentOS ist standardmäßig MariaDB installiert, ...

So ändern Sie die Zeitzone und die Uhrzeit im Ubuntu-System

Auf einem Linux-Computer gibt es zwei Zeitzonen: ...

Implementierung von Platzhaltern und Escape-Zeichen in der Linux-Befehlszeile

Wenn wir Stapeloperationen für einen Dateityp aus...