使用TypeScript开发Express服务器时视图目录查找失败求助

这问题我之前帮好几个开发者踩过坑，核心原因是相对路径的解析基准变了：你的TypeScript源码在项目根目录，写相对路径时默认以根目录为基准，但编译后的JS文件在./bin目录，运行时Express会以JS文件所在的bin目录为基准去查找views，自然会去bin/views找，而你的views实际在项目根目录，所以报错。

下面给你两个最实用的解决方案：

方案1：用绝对路径指定views目录（最稳妥推荐） #

直接在Express配置里用Node的path模块拼接出项目根目录的绝对路径，彻底摆脱相对路径的困扰。

示例代码：

import express from 'express';
import path from 'path';

const app = express();

// 获取项目根目录：__dirname是编译后JS所在的bin目录，往上跳一级就是根目录
const projectRoot = path.resolve(__dirname, '..');
// 明确指定views目录为根目录下的views文件夹
app.set('views', path.join(projectRoot, 'views'));

// 其他Express配置...

原理：__dirname在编译后的JS文件中代表./bin的绝对路径，path.resolve(__dirname, '..')会自动回退到项目根目录，再拼接views就得到了精准的绝对路径，不管代码在哪运行都不会出错。

方案2：复制views目录到bin（适合不想改代码的场景） #

如果你不想调整代码逻辑，可以通过编译脚本把views文件夹同步到bin目录，让Express能在bin/views找到文件：

1. 先确保tsconfig.json的基础配置正确：

{
  "compilerOptions": {
    "outDir": "./bin",
    "rootDir": "./src", // 假设你的TS源码在src目录
    // 其他TS配置...
  }
}

2. 安装copyfiles工具用来复制静态资源：

npm install copyfiles --save-dev

3. 修改package.json的编译脚本，编译TS后自动复制views：

{
  "scripts": {
    "build": "tsc && copyfiles -u 1 ./src/views/**/* ./bin",
    "start": "node ./bin/index.js"
  }
}

这种方法的缺点是每次编译都要同步资源，不如绝对路径的方案省心。

额外提醒：静态资源目录同理 #

如果你的项目还有public这类静态资源目录，也要用同样的绝对路径方法配置，避免出现类似找不到静态文件的问题：

app.use(express.static(path.join(projectRoot, 'public')));

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