如何修复tsconfig.json模块未找到问题？绝对路径导入配置求助

文件夹结构 #

\---src  
|   \---test
|   |   \---login
|   |       index.ts
|   \---utils
|       |   utilsFuntion.ts

需求 #

在src/test/login/index.ts中，希望用简洁的绝对路径导入src/utils/utilsFuntion.ts的内容，即使用：

import {somefuntion} from 'utils/utilsFuntion';

而非冗长的相对路径：

import {somefuntion} from '../../../utils/utilsFuntion';

当前tsconfig.json配置 #

{
    "compilerOptions": {
        "target": "es6",
        "lib": ["dom", "dom.iterable", "esnext"],
        "strict": true,
        "module": "commonjs",
        "noEmit": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "baseUrl": "src",
        "paths": {
          "src/*": ["src/*"]
        }
    },
    "include": ["src"]
}

遇到的问题 #

配置baseUrl和paths后，使用import {somefuntion} from 'utils/utilsFuntion';时出现错误：

Error: Cannot find module 'utils/helpFunction'

尝试以下导入方式均无效：

./utils/utilsFuntion.ts
./utils/utilsFuntion
utils/utilsFuntion.ts
src/utils/utilsFuntion.ts
src/utils/utilsFuntion

1. 修正tsconfig的paths配置 #

当前paths中的"src/*": ["src/*"]没有实际作用，因为baseUrl已设为src，直接配置全局匹配或精准匹配：

{
    "compilerOptions": {
        // 保留其他原有配置
        "baseUrl": "src",
        "paths": {
          "*": ["*"]
          // 或者更精准的配置："utils/*": ["utils/*"]
        }
    },
    "include": ["src"]
}

配置后TypeScript就能识别从src根目录出发的utils/utilsFuntion路径。

2. 排查文件名拼写错误 #

错误提示中出现的是utils/helpFunction，但实际文件名是utilsFuntion.ts，请确认：

• 导入语句中的文件名与实际文件名完全一致（包括大小写、拼写）
• 错误信息中的helpFunction是否为笔误，应改为utilsFuntion

3. 重启TypeScript服务 #

编辑器的TypeScript服务可能未自动加载配置变更，可通过以下方式重启：

• VSCode中按下Ctrl+Shift+P，选择「TypeScript: Restart TS Server」
• 直接重启编辑器，确保配置生效

4. 适配打包工具的别名配置 #

TypeScript的paths仅用于编译阶段的类型检查，若项目使用打包工具（如Webpack/Vite），需额外配置别名以确保运行时路径解析正确：

• Webpack：在webpack.config.js中添加：

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

• Vite：在vite.config.ts中添加：

  import { defineConfig } from 'vite';
  import path from 'path';
  
  export default defineConfig({
    resolve: {
      alias: {
        'utils': path.resolve(__dirname, 'src/utils')
      }
    }
  });
  

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