带有静态 HTML 的 Node + Express。如何将所有请求路由到 index.html？

IT技术 javascript node.js express
2021-03-01 18:53:30

我正在开发一个使用 Node + Express 和 Handlebars 进行模板化的单页 Web 应用程序。index.html 目前一切正常，它由一个非常标准的 server.js 文件提供：

var express = require('express');

var server = express();
server.use(express.static(__dirname + '/public'));

var port = 10001;
server.listen(port, function() {
    console.log('server listening on port ' + port);
});

从http://localhost:10001/. 我的问题是我在应用程序中使用推送状态，所以浏览器可能会显示一个 URL http://localhost:10001/foo/bar，然后如果我刷新页面，我会收到错误，Cannot GET /foo/bar因为没有路由。

所以我的问题，请原谅我对 Node 的难以置信的愚蠢，我可以让所有请求都路由到 index.html 吗？我的应用程序中的 JavaScript 可以根据页面加载时的 URL 参数处理显示正确的内容。我不想定义自定义路由，因为数量会很大，而且它们的路径可以动态更改。

5个回答
const express = require('express')
const server = express()

/* route requests for static files to appropriate directory */
server.use('/public', express.static(__dirname + '/static-files-dir'))

/* other routes defined before catch-all */
server.get('/some-route', (req, res) => {
  res.send('ok')
})

/* final catch-all route to index.html defined last */
server.get('/*', (req, res) => {
  res.sendFile(__dirname + '/index.html');
})

const port = 8000;
server.listen(port, function() {
  console.log('server listening on port ' + port)
})
public in => "server.use('/public', express.static(__dirname + '/public'));" . 可以在后面的步骤中使用别名 "__dirname + '/public' "，同时为具有指定路由名称的单个文件提供服务吗？
2021-04-25 18:53:30
这是很好的注意到了包罗万象的路线应该是静态的中间件和其他GET路线后，在其他的答案中指出。
2021-05-16 18:53:30

此模式将在命中提供前端应用程序的包罗万象的路由之前提供静态资产。要注册任何其他路由，只需将它们添加到所有路由之上。

var express = require('express');
var server = express();

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

// routes
server.use('*', function (req, res) {
  // serve file
});

var port = 10001;
server.listen(port, function() {
  console.log('server listening on port ' + port);
});
@kemicofa 很棒的收获！固定的！
2021-04-26 18:53:30
嘿，只是想指出您正在导入static但从未真正使用它，因为您这样做了express.static
2021-04-30 18:53:30 
var app = express();

var options = {
  dotfiles: 'ignore',
  etag: true,
  extensions: ['htm', 'html'],
  index: 'index.html',
  lastModified: true,
  maxAge: '1d',
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now());
    res.header('Cache-Control', 'public, max-age=1d');
  }
};

app.use(compression());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(methodOverride());

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

这个简短的东西很好用：

import express from "express";

const app = express(),
      staticServe = express.static(`${ __dirname }/public`);

app.use("/", staticServe);
app.use("*", staticServe);

现在只需确保 HTML/JS 文件中的所有 URL 都是绝对的，因为所有不存在的资源都将返回index.html文件。

Express v 4.15.2

var express = require('express');

var server = express();
server.use(express.static(__dirname + '/public'));

server.get('*', function(req, res){
  res.sendFile('index.html');
});

var port = 10001;
server.listen(port, function() {
    console.log('server listening on port ' + port);
});
@JPollock 在您的全能路线之前为公共文件注册中间件。这样，对 css/js 的请求将在您的索引路由之前被接收。
2021-04-22 18:53:30
这与我所做的编辑一起工作，但它也作用于我的 CSS 文件的 URL，因此它提供 index.html 而不是 CSS 文件。有没有办法只通过 mime 类型（即，仅在 html 上）应用它。
2021-05-05 18:53:30
其它你可能感兴趣的问题
上一篇如何检测用户何时在输入字段中按下 Enter 下一篇ES6：在 Set/Map 迭代期间从 Set/Map 中删除元素是否危险？