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

【问题标题】：Express can't GET my external CSS, why?Express 无法获取我的外部 CSS，为什么？
【发布时间】：2017-02-24 23:10:36
【问题描述】：

控制台总是说：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>

项目路径：

【问题讨论】：

尝试从您的 uri 中删除“公共”部分
@TolgahanAlbayrak "uri"？我不知道你的意思。
使用 /stylesheets/mystyle.css 代替 ../public/stylesheets/mystyle.css
@TolgahanAlbayrak 我快疯了。没有解决办法。请说一下。

标签： javascript css node.js express webstorm

【解决方案1】：

你有一个静态的相对路径（我假设是）一个 HTML sn-p/fragment 由不同深度的多个目录中的多个页面共享。我还假设“public”是您网站的非公开根目录的名称。出于这个原因，您通常应该避免在href="" 和src="" 属性中使用../ 相对路径，而是使用根相对路径/ 或服务器生成的应用程序根URL，也称为“基本”URL。（在 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 文件和其他相关资产，例如.css 文件引用的图像和字体，因为这使得 CSS 中的 URL 更短且没有父相对路径，例如

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

变成：

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

【讨论】：

很遗憾没有。控制台现在显示：X GET localhost:8000/stylesheets/mystyle.css。为什么？
请再看一遍图片。尽管我会选择您的答案作为最佳答案，但您的解决方案还没有解决问题。
@NorwayLover 我看到你的Views 目录下有你的静态文件。我不太熟悉 Node.js Express 以及它如何公开静态文件，所以我无法提供进一步的帮助，抱歉。
哦，您的回答很棒而且很有启发性。很高兴认识像你这样精准的开发者！ ?

【解决方案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>

【讨论】：

很遗憾没有。控制台现在显示：X GET localhost:8000/stylesheets/mystyle.css
@NorwayLover get 请求是 404 还是 200？
@NorwayLover 你能分享你的文件夹/文件结构吗？
@NorwayLover 尝试将 express.static 更改为 express.static('views/public')？
@NorwayLover Cool

【解决方案3】：

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

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

也就是说，您可能需要像这样指定公共目录的绝对路径：

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


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

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

【讨论】：

仅供参考，您必须与其他答案的建议更改一起执行此操作