Heim > Artikel > Web-Frontend > nodejs kann CSS nicht rendern

nodejs kann CSS nicht rendern

WBOYOriginal: 2023-05-25 13:29:37550Durchsuche

Bei der Entwicklung von Webanwendungen verwenden wir normalerweise HTML, CSS und JavaScript zum Erstellen von Seiten. Für Node.js-Entwickler kommt es häufig vor, dass CSS beim Rendern fehlschlägt, wenn sie Node.js zum Rendern von Seiten verwenden.

In Node.js können wir einige Template-Engines wie EJS, Handlers oder Pug verwenden, um HTML-Seiten zu rendern. Im Allgemeinen verweisen wir auf CSS-Dateien in HTML-Dateien. Wenn wir jedoch Node.js zum Rendern der Seite auf der Serverseite verwenden, werden die CSS-Dateien manchmal nicht korrekt referenziert.

Dieses Problem wird normalerweise durch die Sicherheitsrichtlinie des Browsers verursacht, bei der der Browser das Laden von CSS-Dateien aus verschiedenen Quellen nicht zulässt. Schauen wir uns unten einige Lösungen an.

Middleware für statische Dateien verwenden

Wenn wir Node.js zum Rendern der Seite verwenden, müssen wir Middleware für statische Dateien verwenden, damit der Server statische Dateien korrekt laden kann. Express.js ist ein sehr häufig verwendetes Node.js-Framework. Es wird mit der Middleware express.static für die Bereitstellung statischer Dateien geliefert. express.static。

下面是一个使用Express.js加载静态文件的示例:

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

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

在这个例子中，我们在public目录下存放我们的静态文件。在使用express.static后，浏览器能够正确地加载我们的静态文件，包括CSS文件。

修改CSS文件路径

在使用Node.js渲染页面时，我们可能会使用一些路由框架来处理路由。如果我们在路由器中使用了/根路由，那么浏览器可能会出现加载不出CSS文件的情况。

这是由于浏览器会将/解析为服务器根路径，而不是当前页面路径。为了解决这个问题，我们可以使用相对路径来引用CSS文件，或者在路由路径中使用一个相对路径。

下面是一个示例代码，它使用了相对路径来引用CSS文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="./styles.css" />
</head>
<body>
    <h1>Node.js渲染不出CSS</h1>
</body>
</html>

在这个例子中，我们使用了./来引用同级目录下的styles.css文件。如果我们的CSS文件在上级目录中，我们可以使用../

Hier ist ein Beispiel für das Laden statischer Dateien mit Express.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" />
</head>
<body>
    <div class="jumbotron">
        <h1>Node.js渲染不出CSS</h1>
        <p>解决起来也很简单哦！</p>
    </div>
</body>
</html>

In diesem Beispiel speichern wir unsere statischen Dateien im Verzeichnis public. Nach der Verwendung von express.static kann der Browser unsere statischen Dateien, einschließlich CSS-Dateien, korrekt laden.

Wenn wir Node.js zum Rendern einer Seite verwenden, verwenden wir möglicherweise ein Routing-Framework, um das Routing zu verwalten. Wenn wir die Root-Route / im Router verwenden, kann der Browser die CSS-Datei möglicherweise nicht laden.

Das liegt daran, dass der Browser / als Server-Root-Pfad und nicht als aktuellen Seitenpfad auflöst. Um dieses Problem zu lösen, können wir relative Pfade verwenden, um auf CSS-Dateien zu verweisen, oder einen relativen Pfad im Routing-Pfad verwenden.

Das Folgende ist ein Beispielcode, der relative Pfade verwendet, um auf CSS-Dateien zu verweisen:

In diesem Beispiel verwenden wir ./, um auf ssszu verweisen > Datei. Wenn sich unsere CSS-Datei im Verzeichnis der oberen Ebene befindet, können wir mit ../ auf die Datei verweisen.

Das obige ist der detaillierte Inhalt vonnodejs kann CSS nicht rendern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript node.js 中间件 css bootstrap html express Static public JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Nodejs implementiert eine VerzögerungswarteschlangeNächster Artikel：Nodejs implementiert eine Verzögerungswarteschlange

In Verbindung stehende Artikel

Mehr sehen