VSCode可识别绝对导入路径，但Node TypeScript编译器无法解析

问题根源 #

TypeScript的tsconfig.json里的paths只是类型检查层面的映射，Node.js运行时和多数打包工具（如Webpack、Vite）并不会自动读取这个配置，所以会出现编辑器识别正常，但运行/打包时报TS2307模块找不到的错误。

分场景解决方案 #

1. 使用Webpack作为打包工具 #

在Webpack配置文件（通常是webpack.config.js或webpack.config.ts）中添加resolve.alias配置，和tsconfig的paths保持一致：

const path = require('path');

module.exports = {
  // 其他配置...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // 确保包含TS/TSX后缀
  },
};

2. 使用Vite作为打包工具 #

Vite内置支持读取tsconfig的paths，但需要在vite.config.ts中通过resolve.alias关联：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

3. 使用Create React App（CRA） #

CRA默认不允许修改Webpack配置，需要借助craco（Create React App Configuration Override）来扩展：

• 安装依赖：

  npm install @craco/craco --save-dev
  

• 在项目根目录创建craco.config.js：

  const path = require('path');
  
  module.exports = {
    webpack: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
  };
  

• 修改package.json中的启动脚本：

  {
    "scripts": {
      "start": "craco start",
      "build": "craco build",
      "test": "craco test"
    }
  }
  

4. 纯Node.js项目（无打包工具） #

如果是直接用ts-node或tsc编译后运行Node，需要安装tsconfig-paths来让Node识别paths配置：

• 安装依赖：

  npm install tsconfig-paths --save-dev
  

• 修改启动脚本（比如package.json）：

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

验证步骤 #

1. 保存所有配置文件
2. 重启开发服务器（npm start）
3. 检查之前报错的导入语句是否正常运行

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