如何配置tsconfig让组件默认从src绝对路径导入而非相对路径？

1. 补全tsconfig.json的路径映射配置 #

先确认你的paths配置覆盖到组件所在目录。假设ButtonChat位于src/Buttons/ButtonChat.tsx，把tsconfig.json的compilerOptions调整成这样：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"],
      "~src/*": ["src/*"] // 保留你习惯的~前缀映射
    },
    "include": ["src/**/*"] // 确保包含所有src下的文件
  }
}

2. 重启TypeScript服务刷新IDE缓存 #

用VS Code的话，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server回车，让IDE重新读取配置。要是还不行，直接重启编辑器，清除旧的路径缓存。

3. 手动触发绝对路径提示 #

第一次导入ButtonChat时，手动写绝对路径比如import ButtonChat from 'src/Buttons/ButtonChat'，保存后IDE就会记住这个路径，后续再导入时就会自动弹出绝对路径的提示选项。

4. 适配框架的别名配置（按需操作） #

如果是用Vite、Webpack这类构建工具，还得同步配置构建工具的别名，否则编译时会报错：

• Vite：在vite.config.ts里加：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      'src': path.resolve(__dirname, './src')
    }
  }
})

• Webpack：在webpack.config.js里加：

const path = require('path');

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

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