使用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.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()代碼行中顯示express.static()下面的__dirname ，但是如果不是這種情況，則只需調整上一行中的路徑代碼以手動指向public目錄。

僅供參考， index.html起作用的原因是因為當路徑為/時， express.static()具有特殊的邏輯來查找index.html 。 但是， /about不會自動查找about.html 。