ExpressJS 不在某些路由上應用 CSS
[英]ExpressJS not applying CSS on certain routes
問題描述
當我轉到localhost:3000我的 css 可以工作，但是當我轉到localhost:3000/r/test我的 css 不起作用，我收到以下消息：
Refused to apply style from 'http://localhost:3000/r/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
每當我有一條路徑長於一個子路徑的路徑時（我不確定這是否是正確的術語），我的 css 根本不起作用。 例如，這些路線將起作用：
app.get('/', (req, res) => {
...
)
app.get('/cats', (req, res) => {
...
)
app.get('/dogs', (req, res) => {
...
)
但這些都行不通：
app.get('/cats/test', (req, res) => {
...
)
app.get('/dogs/blah', (req, res) => {
...
)
app.get('/hamster/foo', (req, res) => {
...
)
我的 index.js 文件：
const express = require('express');
const path = require('path');
const axios = require('axios');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname + '/views'));
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.render('home');
});
app.get('/r/test', (req, res) => {
res.render('test');
});
app.listen(3000, () => {
console.log(`Listening at http://localhost:3000`);
});
我的 test.ejs 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Test</title>
</head>
<body>
<h1>Hi<h1>
</body>
</html>
我的項目結構是：
Project
|
+-- public
| |
| +--styles.css
|
+-- views
| |
| +-- home.ejs
| +-- test.ejs
|
+--index.js
2 個解決方案
解決方案1
0 2021-10-31 05:02:36
將CSS文件放在公共目錄中，並在鏈接的href中添加/ ，如
<link rel="stylesheet" href="/styles.css">
現在，無論您在頁面上的哪個位置，它每次都會向localhost:3000/style.css請求
/指向根目錄
解決方案2
0 2021-10-31 05:09:19
最好有一個單獨的路徑來提供靜態文件
將靜態路徑更改為
app.use('/static',express.static(path.join(__dirname, 'public')));
並在 ejs 文件中將其用作
<link rel="stylesheet" href="/static/styles.css">
ExpressJs沒有在某些路由上加載CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.