TypeScript编译后baseUrl路径未解析问题求助

问题原因 #

TypeScript官方的tsc编译器仅负责类型检查，不会自动转换tsconfig.json中paths配置的别名。开发模式下（比如用ts-node），工具会自动处理别名解析，但纯tsc构建后，JS文件里的@/xxx别名会原封不动保留，Node.js无法识别这种非标准路径，因此抛出模块找不到的错误。

解决方案 #

方案1：运行时动态解析别名（快速适配）

通过tsconfig-paths在Node.js启动时自动映射别名：

1. 安装依赖：

   npm install --save-dev tsconfig-paths
   

2. 修改package.json的启动脚本（假设编译输出目录为dist，入口文件是index.js）：

   "scripts": {
     "build": "tsc",
     "start": "node -r tsconfig-paths/register dist/index.js"
   }
   

3. 执行npm run start即可，tsconfig-paths/register会在模块加载时自动将@/config这类别名转换成Node.js能识别的实际路径。

方案2：编译时直接替换别名（生产环境推荐）

使用tsc-alias在编译阶段就把别名替换为相对路径，避免运行时依赖额外工具：

1. 安装依赖：

   npm install --save-dev tsc-alias
   

2. 修改package.json的构建脚本：

   "scripts": {
     "build": "tsc && tsc-alias"
   }
   

3. 执行npm run build后，查看dist目录下的文件，会发现@/config已被替换成./config（或对应层级的相对路径），直接运行node dist/index.js即可正常执行。

补充：Babel编译场景

如果项目用Babel处理TypeScript编译，可使用babel-plugin-module-resolver实现别名替换：

1. 安装依赖：

   npm install --save-dev babel-plugin-module-resolver
   

2. 在babel.config.json（或.babelrc）中配置：

   {
     "plugins": [
       ["module-resolver", {
         "root": ["./src"],
         "alias": {
           "@/*": ["*"]
         }
       }]
     ]
   }
   

   Babel编译时会自动将别名转换为正确路径，无需额外处理。

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