提供 css 和 javascript 文件答案

【问题标题】：Serving css and javascript files提供 css 和 javascript 文件
【发布时间】：2016-08-29 19:48:44
【问题描述】：

我是节点的初学者。我正在尝试提供文件。我的项目的层次结构看起来像

应用程序

  modules
  node_modules
  public
    css
      index.css
    html
      index.html
    javascript
  routes
     main.js

在 main.js 中

var express = require('express');
var app     = express();
var path    = require('path')
var port    = 8080;

app.use("/styles",  express.static(path.join(__dirname + '../public/css')));
app.use("/scripts", express.static(__dirname + '../public/javascript'));

app.get('/' , function( req , res ){
    res.sendFile(path.join(__dirname,'../public/html/index.html'))
})
app.listen(port)

我想在 / 路由上提供文件。它工作正常，但没有加载 css 和 javascript - 它在浏览器控制台中引发错误

http://localhost:8080/css/index.css资源加载失败：服务器响应状态为 404（未找到）

设置css路径的正确方法是什么？我很难找到正确的解决方案。

谢谢！

【问题讨论】：

你的静态css路由被称为“styles”，而不是“css”；试试http://localhost:8080/styles/index.css
@Hamms 也找不到文件，为什么是样式？

标签： node.js express

【解决方案1】：

问题在于您的路径定义。当您使用 path.join 时，您应该将字符串传递给它，此方法将使用特定于平台的分隔符作为分隔符将它们连接起来，然后规范化生成的路径。

所以你的样式路径应该是：

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

您的样式将来自：

http://localhost:8080/styles/index.css

因为您使用的是虚拟路径前缀（此处为：/styles）。

如果您不介意特定于平台的分隔符，i。 e.知道您的服务器将是一个类似 unix 的环境并且不需要 虚拟路径前缀 然后只需使用：

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

您的样式将从 css 目录提供：

http://localhost:8080/css/index.css

【讨论】：

最终的风格路线不会从localhost:8080/index.css提供，而是localhost:8080/css/index.css提供服务
@Josh，确保在加载 CSS 时没有在 HTML 文件中使用相对路径。 ../css/index.css 不会是有效路线，但/css/index.css 是有效路线。
@peteb，我刚刚检查过，它从 root 服务：http://localhost:8080/index.css
@dNitro 是的，如果您要创建静态路由 /public/css 而不是 /public，那就对了。
pastebin.com/4byK7Ukk 这是我当前的代码，层次结构保持不变，我通过节点 main.js 运行它，我不知道什么会起作用

【解决方案2】：

因为您设置了其他路线。将路由更改为静态文件。使用这个：

app.use(express.static('../public'));

【讨论】：

../public 的相对路径在使用 __dirname 时是不必要的，因为这正是 __dirname 提供的。 app.use(express.static(path.join(__dirname, 'public'); 是使用path.join() 的正确方法。 + 与您使用 path.join() 的原因相反。
@peteb 你是对的，这是我的错误。我已经修好了