Javascript Express can'；我没有得到我的外部CSS，为什么？_Javascript_Css_Node.js_Express_Webstorm

Javascript Express can'；我没有得到我的外部CSS，为什么？

javascript css node.js express webstorm

Javascript Express can'；我没有得到我的外部CSS，为什么？,javascript,css,node.js,express,webstorm,Javascript,Css,Node.js,Express,Webstorm,控制台总是说：GEThttp://localhost:8000/public/stylesheets/mystyle.css 当然，正如您将在下图中看到的，显然它指的是一条不正确的路径。我使用WebStorm本身生成CSS的href属性 app.js var express = require("express"), app = express(), bodyParser = require("body-parser"), mongoose

控制台总是说：

GEThttp://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}));

<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>

header.ejs

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}));

<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>


我的博客

项目路径：

您在（我假设的是）一个HTML片段/片段中有一个静态相对路径，由多个目录中不同深度的多个页面共享。我还假设“

public

”是您网站的非公开根目录的名称。因此，通常应避免在

href=“”

和

src=“”

属性中使用

。/

相对路径，而是使用根相对

或服务器生成的应用程序根URL，也称为“基本”URL。（在ASP.NET中，这是通过

~/

完成的。它有一个内置的基本URL功能，但是有第三方软件包可以实现这一点）

更改此项：

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

变成：

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

您在（我假设是）一个HTML片段/片段中有一个静态相对路径，该片段由多个目录中不同深度的多个页面共享。我还假设“

public

”是您网站的非公开根目录的名称。因此，通常应避免在

href=“”

和

src=“”

属性中使用

。/

相对路径，而是使用根相对

或服务器生成的应用程序根URL，也称为“基本”URL。（在ASP.NET中，这是通过

~/

完成的。它有一个内置的基本URL功能，但是有第三方软件包可以实现这一点）

更改此项：

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

变成：

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

Express static会将你的应用程序定向到你的静态文件（你已经处理好了），请尝试从你的视图url中删除public，如下所示：

<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>


我的博客

Express static会将你的应用程序定向到你的静态文件（你已经处理好了），尝试从你的视图url中删除public，如下所示：

<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>


我的博客

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

但是，您提供给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" >

var path=require（'path'）；
...
app.use（'/static'，express.static（path.join（uu dirname，'public'））
...

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

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

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


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

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

var path=require（'path'）；
...
app.use（'/static'，express.static（path.join（uu dirname，'public'））
...

尝试从您的计算机中删除“公共”部件uri@TolgahanAlbayrak“uri”？我不知道你的意思。用

/stylesheets/mystyle.css

代替

。/public/stylesheets/mystyle.css

@TolgahanAlbayrak我快疯了。没有解决办法。试着把“公共”部分从你的字典里去掉uri@TolgahanAlbayrak“uri”？我不知道你的意思。用

/stylesheets/mystyle.css

代替

。/public/stylesheets/mystyle.css

@TolgahanAlbayrak我快疯了。没有解决办法。不幸的是，请说不。控制台现在显示：X GET@NorwayLover GET请求是404还是200？@NorwayLover您可以共享您的文件夹/文件结构吗？@NorwayLover尝试将express.static更改为express.static（'views/public'）？@NorwayLover很遗憾。控制台现在显示：X GET@NorwayLover GET请求是404还是200？@NorwayLover您可以共享您的文件夹/文件结构吗？@NorwayLover尝试将express.static更改为express.static（'views/public'）？@NorwayLover很遗憾。控制台现在显示：X GET localhost:8000/stylesheets/mystyle.css。为什么？请再看一遍图片。您的解决方案尚未解决问题，尽管我将选择您的答案作为最佳答案。@NorwayLover我看到您的

视图

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

视图

目录下有静态文件。我不太熟悉Node.js Express以及它如何公开静态文件，所以我无法提供进一步的帮助，抱歉。哦，你的回答很好，很有启发性。很高兴见到像你这样的开发人员！仅供参考，您必须与其他答案的建议变更一起进行。您必须与其他答案的建议变更一起进行