res.sendfile() 不能很好地服务于 JavaScript

Question

我想使用静态文件服务没有任何渲染引擎。 我试过用：

res.sendfile('public/index.html');

在 '/' GET 路由上，并在我的路由上为静态文件表示中间件：

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

但是似乎客户端要求的所有 javascript 都与 index.html 文件信息一起下载。

如何才能成功下载 CSS/JS 静态文件？

更新：

这里是“res.sendfile ...”的路径：

app.get('/*', index);

我希望任何路由上对服务器的所有请求都将获得 index.html 及其所有 JS&CSS 关联。

Answer 1

我想这可能会对你有所帮助...

在app.js 文件中...

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

app.use("/styles",  express.static(__dirname + '/public/stylesheets'));
app.use("/scripts", express.static(__dirname + '/public/javascripts'));
app.use("/images",  express.static(__dirname + '/public/images'));


// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', function (req, res) {
      res.sendfile(__dirname + '/public/home.html');
});

将home.html 保存在/public 文件夹中，将JavaScript 文件保存在/public/javascripts 中，将图像保存在/public/images 中，将css 文件保存在/public/stylesheets 文件夹中。

在 HTML 文件中的引用应该是你定义的词（例如：/scripts/home.js）...像这样

    <link rel="stylesheet"   type="text/css" href="/styles/home.css" >
    <script src="/scripts/home.js" type="text/javascript"></script>   

Answer 2

var express=require("express");

var app=express();

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


app.set("views",__dirname+'/website/views');


app.get("/",function(req,res){
    res.sendfile('index.html');

});

上面的代码是我的。我想帮助你。

Answer 3

为什么不这样呢？

if(req.url == '/') { // Root lookups appear to be mapped to index.html
    next();
} else {
    fname = [disk location of your website] + req.url;
    fs.open(fname, 'r', function(err, fd) {
        if(err) {
            next();
        } else {
            fs.close(fd);
            res.sendfile(fname);
        }
     });
}

Answer 4

嗯，最简单的解决方案是移动app.use(express.static(path.join(__dirname, 'public')))

在你打电话给app.use(app.router);之前起床

这样，静态中间件在app.get('/*', index);之前得到服务

Answer 5

我在这里做了一个假设，你的路线是按这个顺序声明的：

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

如果确实如此，那么以下建议成立：

这里的问题是 app.get('/*', ...) 会拦截所有匹配的请求，这基本上就是一切。您的静态中间件将没有机会提供文件。

如果您删除该路由，那么您应该可以解决问题，因为 index.html 已经在 public 目录中，并且可以由静态中间件提供服务。

有关其工作原理的详细说明，请参阅此问题的答案：node.js / express.js - How does app.router work?

根据上述问题的补充进行更新：

您已将此描述为服务器的当前行为：

似乎客户端要求的所有javascript都与index.html文件信息一起下载。

你已经问了这个问题：

如何才能成功下载 CSS/JS 静态文件？

有这个要求

我希望任何路由上对服务器的所有请求都将获得 index.html 及其所有 JS&CSS 关联。

您的问题和要求是相互对立的。服务器将准确地将您告诉/配置它的内容发送回客户端。它要么总是发回index.html，这正是你的要求，要么它会成功地提供index.html和它引用的任何CSS/Javascript，这就是你原来的问题陈述。

在你下面的一个 cmets 中你说过：

我想这样做的原因是因为我正在使用模板，并且 index.html 包装了每个模板。我在客户端上使用 angular，我开始意识到我必须使用渲染引擎才能实现这一点。同样，我的 Angular 客户端定义了部分 url，当它发送请求到：'/partial/sample'时，我需要 index.html 来包装'sample.html'，例如

我基于此陈述的假设（如有错误请更正）

• 您正在使用客户端模板
• 您从服务器检索的文件是静态的（即，它们需要按原样从服务器提供）
• 您的路线当前按此顺序声明
  1. app.use(app.router);
  2. app.use(express.static(path.join(__dirname, 'public')));
• 您没有做任何服务器端模板（即所有内容都位于public 下某处）

如果这些假设是正确的，解决方法是按照我最初的建议并删除这条路线：

app.get('/*', index);

如果你这样做（假设你的资源被正确引用）：

• 您的index.html 将通过静态中间件从服务器中按原样检索。
• 您在 index.html 中引用的每个 css/js 文件都将通过静态中间件从服务器返回
• 任何加载模板文件的请求（例如sample.html）都将由您的静态中间件处理并返回给客户端而不进行修改