Css 文件未在 ejs 中加载

Question

问题 - 我无法弄清楚为什么 CSS 文件没有在 ejs 中加载。终端没有给出错误消息。 它的显示消息 -GET /assets/css/style.css 404 159 - 0.674 毫秒。服务器（本地主机运行良好）。

我尝试了什么：app.use(express.static(__dirname + '/assets/css')); 这也给出了相同的消息。我什至尝试更改文件路径并尝试了其他方法，但没有任何效果。

我的 ejs 代码 -

const express = require('express');
const dotenv = require('dotenv');
const app = express();
const morgan =require('morgan');
const path = require('path');
dotenv.config({path:'./config.env'});
const PORT = process.env.PORT ||8080


// parse request to body-parser

app.use(express.urlencoded({ extended: true }));

app.use(express.json());

// log request 
app.use(morgan('tiny'));

// set view engine 
app.set("view engine","ejs");
app.set("views",path.join(__dirname,"views"))
//load assets


app.use('./css',express.static(path.resolve(__dirname,"assets/css")));

//css/style.css
app.use('/img',express.static(path.resolve(__dirname,"assets/img")));
app.use('/js',express.static(path.resolve(__dirname,"assets/js")));
app.use(express.static("assets"));

app.get('/', (req,res)=>{

    res.render('index');
    
});

app.listen(PORT,()=>{console.log('Server is running Sucessfully ');});

_header.ejs 文件

<html>
    <head>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    
        <link rel="stylesheet" type="text/css" href ="/assets/css/style.css">
</head>
    <body>
 <!----HEader-->
    <header id="header">
<nav>
    <div class ="text-center">
      <a href ="/" class ="nav-brand text-dark">User Management System</a>
    </div>
</nav>

    </header>

File structure
-assets

--css

---style.css

Answer 1

app.use用于将 gobal 中间件添加到您的路由中。

基本语法如下：-

app.use('/someRoute', middleware);

代替...

app.use('./css',express.static(path.resolve(__dirname,"assets/css")));

//css/style.css
app.use('/img',express.static(path.resolve(__dirname,"assets/img")));
app.use('/js',express.static(path.resolve(__dirname,"assets/js")));
app.use(express.static("assets"));

尝试...

app.use(express.static(path.join(__dirname, "assets")));

这将为 web 上的整个assets文件夹提供服务。

上面的代码行将为您的服务器拥有和将来拥有的每条路由提供您的assets文件夹及其所有内容到 web。

由于现在assets文件夹已经提供，您实际上不需要将assets添加到<link>标记内的href中。

css 文件的路径是assets/css/styles.css 。

早些时候，您的服务器正在寻找assets/assets/css/styles.css ，因为assets已经提供。

在您的_header.ejs文件中，将链接的href更改为：-

<link rel="stylesheet" type="text/css" href ="/css/style.css">

现在服务器会寻找assets/css/styles.css存在所以现在没有错误。

我希望这有帮助。

我不明白你想用这个做什么......

app.use('./css',express.static(path.resolve(__dirname,"assets/css")));
app.use('/img',express.static(path.resolve(__dirname,"assets/img")));
app.use('/js',express.static(path.resolve(__dirname,"assets/js")));

Css 文件未在 ejs 中加载

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-05-13 17:55:31

Css 文件未在 ejs 中加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-05-13 17:55:31

解决方案1
1 已采纳 2021-05-13 17:55:31