Express无扩展名静态文件服务问题：文件与子目录同名冲突

Alright, let's break down why you're hitting this issue and what you can do about it.

First, the root cause: when you request /bar, express.static (which uses the serve-static module under the hood) prioritizes directories over files. Here's exactly what happens:

1. It checks if bar exists on your filesystem—it does, as a directory.
2. With default settings, it redirects to /bar/ because redirect: true. When you disable redirects, it then looks for an index file (like index.html) inside the bar/ directory. If that doesn't exist, it just calls next() instead of trying to match bar.html—the extensions option only kicks in when the original requested path doesn't exist at all.

Unfortunately, you can't fix this conflict only with native express.static configuration because of that directory-first priority and how the extensions logic works. But there are two clean ways to solve this:

1. Adjust your static file structure (recommended, simplest fix) #

The conflict happens because Nuxt generated both bar.html and a bar/ directory. You can tweak your Nuxt setup to avoid this:

• If bar.html is a standalone page and bar/ is for nested routes, rename the standalone page's component (e.g., from bar.vue to bar-page.vue). Nuxt will generate bar-page.html, so you can access it via /bar-page, and /bar will correctly route to the bar/ directory's index.
• Alternatively, make sure parent pages for nested routes use index.vue naming (e.g., pages/bar/index.vue). Nuxt will then generate bar/index.html instead of bar.html, eliminating the conflict entirely.

2. Keep your current structure with a tiny middleware #

If you don't want to restructure your files, add a super lightweight middleware before express.static to handle the name collision. This ensures express.static picks up bar.html instead of getting stuck on the bar/ directory:

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// Middleware to handle file-directory name conflicts
app.use((req, res, next) => {
  const targetFile = path.join(__dirname, 'public', `${req.path}.html`);
  fs.access(targetFile, fs.constants.F_OK, (err) => {
    if (!err) req.path += '.html'; // If the file exists, adjust the path
    next();
  });
});

// Your existing static config
app.use(express.static('public', {
  extensions: ['html'],
  redirect: false
}));

app.listen(3000);

This middleware checks if a matching .html file exists for the requested path. If it does, it modifies the request path slightly so express.static finds the file immediately, skipping the directory check. It's almost like using just express.static—the middleware is minimal and focused solely on fixing this specific edge case.

内容的提问来源于stack exchange，提问作者Felwin