使用 Express Router 发送多个静态文件

Question

我正在尝试使用 Express 路由器根据 router.get 中提供的 URL 发送静态 .html 文件。

比如这个发送主页

router.get('/', function(req, res, next) {
res.sendFile('index.html');
});

这会发送“关于”页面

router.get('/about', function(req, res, next) {
res.sendFile("about.html")
});

当应用首次加载时，它会按预期加载 index.html。但是由于某种原因，当我访问 localhost:3000/about 时，我收到 404 错误。 about.html 肯定存在，因为我可以转到 localhost:3000/about.html 并加载页面。

如果有帮助，这里是我的一些其他 Express 文件。

App.js（我为此使用了 express 生成器。仅添加了对 express.static 的引用以引用公共文件夹）

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');
// var config = require('./config')['dev']

var app = express();
var http = require('http');

//Validate inputs
const { body,validationResult } = require('express-validator/check');
const { sanitizeBody } = require('express-validator/filter');

// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'jade');

app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

//Setup public for static files
app.use(express.static(path.join(__dirname, 'public')));

//Use index file for router
app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.send('You\'ve reached the end of the Internet :)')
});

module.exports = app;

index.js（包括快速路由器）

var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var db= require('db')

// Routes
/* GET home page. */
router.get('/', function(req, res, next) {
  res.sendFile('index.html');
});

router.get('/about', function(req, res, next) {
  res.sendFile("about.html")
});

module.exports = router;

非常感谢您提供的任何帮助！

Answer 1

根据您的描述，您的express.static() 似乎正在为您加载index.html，并且还使http://localhost:3000/about.html 为您工作。但是，您手动创建的路由实际上都不起作用，因为res.sendFile("about.html") 没有引用正确目录中的文件。

因此，您需要修复该文件的路径：

router.get('/about', function(req, res, next) {
  res.sendFile(path.join(__dirname, "../public", "about.html"), {dotfiles: "allow"});
});

这假设这些文件位于您的 public 目录中，并且它是 __dirname 下的子目录（它出现在您的 express.static() 代码行中），但如果不是这种情况，那么只需调整将上述代码行中的路径手动指向public目录。

仅供参考，index.html 起作用的原因是因为express.static() 具有特殊逻辑来查找index.html，而路径只是/。但是，/about 不会自动寻找 about.html。