Question

控制台总是说：GET http://localhost:8000/public/stylesheets/mystyle.css。

当然，正如您将在下面附图中看到的那样，显然它指的是不正确的路径。我使用WebStorm本身来生成CSS的href属性。

app.js

var     express = require("express"),
            app = express(),
     bodyParser = require("body-parser"),
       mongoose = require ("mongoose");

app.use(express.static("public"));
app.set("view engine","ejs");
app.use(bodyParser.urlencoded({extended:true}));

header.ejs

<html>
<head>
    <title>My Blog</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="../public/stylesheets/mystyle.css" >
</head>

项目路径：

Answer 1

你有一个静态相对路径（我假设是）一个HTML片段/片段，由不同深度的多个目录中的多个页面共享。我还假设＆＃34; public＆＃34;是给您网站的非暴露根目录的名称。因此，您通常应避免在../和href=""属性中使用src=""相对路径，而是使用根相对/或服务器生成的应用程序根URL，也被称为＆＃34; base＆＃34;网址。（在ASP.NET中，这是使用~/完成的。Node.js does not currently具有内置的基本URL功能，但有可用的第三方软件包。）

改变这个：

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

到此：

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

顺便说一句，如果您的styleseheets目录仅包含*.css个文件，则应考虑使用名为styles的目录，其中包含.css个文件和< / em>其他相关资产，例如.css文件引用的图像和字体，因为这会使CSS中的URL更短并且没有父相对路径，例如

foo#bar { background-image: url("../images/fooBg.png"); }

变为：

foo#bar { background-image: url("fooBg.png"); }

Answer 2

Express static会将您的应用程序指向您的静态文件（您已经处理过这个问题），尝试从您的视图网址中删除公众，如下所示：

<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.css" type="text/css">
<link rel="stylesheet" type="text/css" href="stylesheets/mystyle.css" >
</head>

Answer 3

如果其他答案不起作用，则可能与使用express设置静态目录的方式有关。如express docs中所述：

但是，您提供给express.static函数的路径是相对于启动节点进程的目录。如果你从另一个目录运行快递应用程序，使用它更安全要提供的目录的绝对路径：

也就是说，您可能需要指定公共目录的绝对路径，如下所示：

var path = require('path');
...


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

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

Express无法获取我的外部CSS，为什么？

3 个答案: