So hosten Sie statische Dateien mit Express

Dieses Mal zeige ich Ihnen, wie Sie Express zum Hosten statischer Dateien verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Express zum Hosten statischer Dateien gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

MiddlewareExpress.statisch

Wenn wir Express zum Initialisieren eines Verzeichnisses verwenden, befindet es sich in app.js Ich habe viele empfohlene Apps gesehen.

Eine der wichtigsten Middlewares ist express.static (die Middleware bleibt in Version 4.0 erhalten)

var express = require('express');
var app = express();
app.use('/static',express.static('public'));

Express.static kann uns beim Hosten statischer Dateien, JS, CSS, IMG usw. helfen.

express.static-Verwendung

Grundlegende Verwendung

Im Projekt ist CSS unter öffentlich Verzeichnis, js, img und andere Ordner.

Ich muss sie unbedingt über Express hosten, damit wir beim Starten des Servers auf die Daten zugreifen können.

Fügen Sie

var express = require('express');
var app = express();
app.use(express.static('public'));

in app.js hinzu und wir können

http://localhost:3000/css/style.css
http://localhost übergeben: 3000/js/style.js
http://localhost:3000/img/style.png

Hinweis:Die Pfade aller Dateien sind daher relativ zum Speicherverzeichnis , wird der Verzeichnisname, in dem die statischen Dateien gespeichert sind, nicht in der URL angezeigt.

Virtuelles Verzeichnis

Dies wird durch die Angabe eines Mountpfads für das statische Ressourcenverzeichnis erreicht.

Wir können unseren statischen Dateien ein virtuelles Verzeichnis hinzufügen, was es uns manchmal erleichtert, unsere URLs einheitlich zu verwalten und auch die Attribute von Ressourcen klar zu erkennen.

var express = require('express');
var app = express();
app.use('static',express.static('public'));

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Vue bedient, um das #-Zeichen im Pfad zu entfernen

Wie man Vue dazu verwendet Klicken Sie auf das Leerzeichen Versteckte Div-Implementierung

Das obige ist der detaillierte Inhalt vonSo hosten Sie statische Dateien mit Express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!