TypeScript 环境设置alias别名

1. 首先配置webpack。

在webpack的resolve配置项里面配置你需要的别名，alias设置直接在webpack的base配置里面设置就行了。例如：

// webpack.base.js
const path = require('path');
...

module.exports = {
  ...
  resolve: {
    ...
    alias: {
      "@api": path.join(__dirname, 'api'), // 注意这个路径是相对webpack.base.js的路径
      "@utils": path.join(__dirname, 'utils')
    }
  }
}

2. 然后配置tsconfig.json

如果没有这个文件，在项目根目录新建一个就行，然后配置compilerOptions对象：

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@api": ["src/api"], // 如果要使用index.tsx的，需要配置这个
      "@api/*": ["src/api/*"], // 要使用别名下的模块的，配置这个。
      "@utils/*": ["src/utils/*"],
      "@utils": ["src/utils/index.ts"]
    }
  },
  ...
}

最后重启项目就行了。