TypeScript import别名在dist目录中不生效问题求助

核心原因 #

TypeScript的compilerOptions.paths仅用于编辑器语法提示和类型检查，不会在编译阶段将别名替换为实际相对路径——尤其是当你设置module: esnext时，TypeScript只会输出与源码结构一致的ES模块文件，不会修改导入路径。

步骤1：修正tsconfig路径配置 #

你的paths配置指向的是根目录下的utils/*，但实际工具函数在src/utils/*，先修正路径确保编辑器和类型检查正常：

{
  "compilerOptions": {
    "baseUrl": "./",
    "rootDirs": ["src"],
    "outDir": "dist",
    "lib": ["es2020"],
    "target": "es2020",
    "module": "esnext",
    "types": ["node"],
    "paths": {
      "@utils/*": ["src/utils/*"] // 修正为实际路径
    }
  },
  "include": ["src/**/*"] // 建议添加该配置确保所有src文件被编译
}

步骤2：用tsc-alias替换编译后的别名 #

安装专门处理别名替换的工具tsc-alias：

npm install tsc-alias --save-dev

修改package.json中的build脚本，让TypeScript编译完成后自动替换别名：

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

运行npm run build后，dist目录下的user.mutation.js中的导入会被替换为正确的相对路径，比如：

import { encryptPassword } from "../../../../utils/auth.js"

备选方案：用构建工具打包（如Webpack/Rollup） #

如果你的项目使用Webpack或Rollup，可以在构建工具中配置别名，同时与tsconfig保持一致：

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

  module.exports = {
    resolve: {
      alias: {
        "@utils": path.resolve(__dirname, "src/utils")
      }
    }
  }
  

• Rollup：使用@rollup/plugin-alias插件配置别名

这样构建工具会在打包阶段直接替换别名，无需额外处理dist文件。

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