nodejs tidak boleh membuat css-Soal Jawab bahagian hadapan-php.cn

nodejs tidak boleh membuat css

WBOY

Lepaskan： 2023-05-25 13:29:37

asal

529 orang telah melayarinya

Apabila membangunkan aplikasi web, kami biasanya menggunakan HTML, CSS dan JavaScript untuk membina halaman. Bagi pembangun Node.js, adalah perkara biasa untuk menghadapi kegagalan CSS untuk dipaparkan apabila menggunakan Node.js untuk memaparkan halaman.

Dalam Node.js, kami boleh menggunakan beberapa enjin templat seperti EJS, Handlebars atau Pug untuk memaparkan halaman HTML. Secara umumnya, kami akan merujuk fail CSS dalam fail HTML, tetapi apabila kami menggunakan Node.js untuk memaparkan halaman pada bahagian pelayan, kadangkala fail CSS tidak dirujuk dengan betul.

Masalah ini biasanya disebabkan oleh dasar keselamatan penyemak imbas, di mana penyemak imbas tidak membenarkan fail CSS dimuatkan daripada sumber yang berbeza. Mari lihat beberapa penyelesaian di bawah.

Gunakan perisian tengah fail statik

Apabila kami menggunakan Node.js untuk memaparkan halaman, kami perlu menggunakan beberapa perisian tengah fail statik untuk membenarkan pelayan memuatkan fail statik dengan betul dokumen. Express.js ialah rangka kerja Node.js yang sangat biasa digunakan. Ia disertakan dengan fail statik yang menyajikan perisian tengah express.static.

Berikut ialah contoh memuatkan fail statik menggunakan Express.js:

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

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

Salin selepas log masuk

Dalam contoh ini, kami menyimpan fail statik kami dalam direktori public. Selepas menggunakan express.static, penyemak imbas dapat memuatkan fail statik kami dengan betul, termasuk fail CSS.

Ubah suai laluan fail CSS

Apabila menggunakan Node.js untuk memaparkan halaman, kami mungkin menggunakan beberapa rangka kerja penghalaan untuk mengendalikan penghalaan. Jika kami menggunakan / laluan akar dalam penghala, penyemak imbas mungkin tidak dapat memuatkan fail CSS.

Ini kerana penyemak imbas akan menyelesaikan / ke laluan akar pelayan dan bukannya laluan halaman semasa. Untuk menyelesaikan masalah ini, kita boleh menggunakan laluan relatif untuk merujuk fail CSS atau menggunakan laluan relatif dalam laluan penghalaan.

Berikut ialah kod sampel yang menggunakan laluan relatif untuk merujuk fail 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>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan ./ untuk merujuk styles.css dalam dokumen direktori yang sama. Jika fail CSS kami berada dalam direktori peringkat atas, kami boleh menggunakan ../ untuk merujuk fail.

Gunakan CDN

Apabila kami membangunkan aplikasi web menggunakan Node.js, kami boleh menggunakan CDN untuk memuatkan fail CSS. Kaedah ini tidak memerlukan menyimpan fail CSS pada pelayan, tetapi menyimpan fail CSS pada pelayan CDN, dan kemudian memuatkan fail CSS melalui pautan CDN.

Mengambil Bootstrap sebagai contoh, kami boleh menggunakan kod berikut dalam fail HTML untuk memuatkan Bootstrap:

<!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>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan pautan CDN Bootstrap untuk memuatkan fail CSS.

Ringkasan

Di atas ialah tiga kaedah untuk menyelesaikan masalah yang Node.js tidak dapat menghasilkan CSS: gunakan perisian tengah fail statik, ubah suai laluan fail CSS dan gunakan CDN. Apabila kami membangunkan aplikasi web, kami harus memberi perhatian untuk merujuk fail CSS dengan betul ke halaman HTML untuk mengelakkan masalah yang CSS tidak dapat diberikan.

Atas ialah kandungan terperinci nodejs tidak boleh membuat css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!