CSS 和 JS 文件未在节点 js 中链接

Question

我想使用中间件 func 来提供静态文件，但问题是我的 css 文件没有使用节点和 express

与 html 文件链接

错误是：

Refused to apply style from 'http://localhost:4000/static/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

app.js:

const express=require('express');

const path=require('path');

const app=express();


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


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

   res.sendFile(path.join(__dirname,'static','index.html'));

});

app.listen(3000);

index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <link rel="stylesheet" type="text/css"  href="/static/css/style.css">
</head>
<body>
    <div class="asd">
          Hi xyz here..
          
    </div>
    <script src="/static/js/script.js"></script>
</body>
</html>

文件夹结构为：

 static

   css

     main.css

   js

     script.js

   index.html

 app.js

我试了很多，但我找不到错误，请帮忙！！谢谢！！

Answer 1

您不需要在路径中添加'/':

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

此外，您应该在您的应用程序文件中进行更改：

app.use(express.static(__dirname + '/static'));

这样 express 就知道它必须从哪里提供静态文件。

Answer 2

您正在 /public 端点提供静态文件夹。所以你应该把 link 改成

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

和

<script src="/public/js/script.js"></script>

还要检查 css 文件的名称。

Answer 3

我们将不得不做这样的事情：

app.js

const express=require('express');

const path=require('path');

const app=express();


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


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

   res.sendFile(path.join(__dirname,'static','index.html'));

});

app.listen(3000, () => {
  console.log("Starting at", 3000);
});

index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/public/js/main.js"></script>
    <link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
    <div class="asd">
          Hi xyz here..
    </div>
    <script src="/public/js/script.js"></script>
</body>
</html>

截图如下：

我们可以想到的基本拇指规则：

app.use('<something_here>', express.static(path.join(__dirname,'./static')));

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

CSS 和 JS 文件未在节点 js 中链接

CSS and JS file not linking in node js

node.js

express

static-files