如何使用Express配置静态文件夹及动态内容视图文件夹

嘿，我刚好碰到过这个问题！其实核心原因是Express中间件的匹配顺序，先给你拆解清楚：

一、正确配置EJS作为视图引擎并渲染首页 #

要让Express用EJS渲染根路径的首页，你需要先设置视图引擎，再定义根路由，代码如下：

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

// 告诉Express我们用EJS当视图引擎
app.set('view engine', 'ejs');
// 要是你的视图文件不在默认的`views`文件夹里，记得加这句指定路径
// app.set('views', './my-custom-views');

// 根路径请求时渲染index.ejs，还能传动态数据进去
app.get('/', (req, res) => {
  res.render('index', { pageTitle: '我的EJS首页' });
});

app.listen(3000, () => {
  console.log('服务器跑起来啦：http://localhost:3000');
});

这段代码运行后，访问http://localhost:3000就会自动加载views文件夹里的index.ejs并渲染返回。

二、为什么静态目录会让EJS渲染被忽略？ #

当你加上静态目录配置时，比如：

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

Express的中间件是按顺序匹配请求的，express.static会先检查请求路径是否对应public文件夹里的文件——当访问根路径/时，它会自动找public里的index.html（这是静态目录的默认索引文件），如果找到就直接返回，完全跳过你后面定义的根路由。这就是为什么你的EJS渲染被忽略了！

解决方法：调整中间件顺序（最常用） #

只要把你的根路由定义放在express.static前面，让路由先匹配请求就行：

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

app.set('view engine', 'ejs');

// 先定义根路由，优先处理根路径请求
app.get('/', (req, res) => {
  res.render('index', { pageTitle: '我的EJS首页' });
});

// 再配置静态目录，处理其他静态资源请求
app.use(express.static(__dirname + '/public'));

app.listen(3000, () => {
  console.log('服务器跑起来啦：http://localhost:3000');
});

这样调整后，访问/会先触发EJS渲染，而访问/style.css、/images/avatar.png这类静态资源时，才会去public文件夹里找。

另一种思路：给静态目录加挂载前缀 #

如果你想保留public里的index.html，又不想干扰根路由的EJS渲染，可以给静态目录指定一个挂载路径：

// 静态资源都通过/static前缀访问，比如http://localhost:3000/static/index.html
app.use('/static', express.static(__dirname + '/public'));

这样根路径/还是会渲染EJS，而静态文件需要通过/static路径访问，互不干扰。

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