Mam duże kłopoty z obsługującym CSS za pomocą Express JS. W końcu zorientowałem się, jak, ale jestem trochę zdezorientowany, dlaczego mój nowy kod działa, ale mój stary kod nie. To jest mój nowy kod, który działa:

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 5010;

console.log(__dirname)
app.use('/public', express.static('public'));
app.set('views', path.join(__dirname, 'views'))

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'home.html'));
});

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

Mój system plików wygląda tak:

index.js
public
  css
    home.css
views
  home.html

Pierwotnie zamiast mieć:

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

Miałem:

app.use(express.static(path.join(__dirname, 'public')));

Dlaczego druga wersja działa, ale pierwszy nie? Jaki jest cel pierwszego parametru w drugiej wersji? Także, na wypadek, gdyby to robi różnicę, koduję na Replet.com.

1
Illusion705 14 kwiecień 2021, 00:00

1 odpowiedź

Najlepsza odpowiedź

Podczas używania 1 parametru

app.use(express.static(path.join(__dirname, 'public')));

Ten kod służy plikom w "publicznym" podkatalogu bieżącego katalogu. URL Aby uzyskać dostęp do pliku w public/css/home.css to: http://localhost/css/home.css

Używając 2 parametrów

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

Ten kod służy również plikom w "publicznym" podkatalogu bieżącego katalogu, z prefiksem wirtualnej ścieżki "/ public". Więc adres URL do uzyskania dostępu do pliku w public/css/home.css to: http://localhost/public/css/home.css

Możemy zmienić pierwszy parametr do wszystkiego, na przykład, jeśli mamy:

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

Następnie adres URL do tego samego pliku staje się: http://localhost/static/css/home.css.

Więcej informacji można znaleźć więcej informacji z oficjalnego dokumentu Oto

1
Đăng Khoa Đinh 14 kwiecień 2021, 17:38