我们使用第三方库 @craco/craco 配置别名

教程

  1. 安装 @craco/craco

    1
    npm i -D @craco/craco
  2. 在项目根目录下创建配置文件 path.tsconfig.json:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
    "compilerOptions": {
    "baseUrl": "./",
    "paths": {
    "@/*": [
    "src/*"
    ]
    }
    }
    }
  3. 修改 package.json 中的脚本命令

    1
    2
    3
    4
    5
    6
    "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
    },
  4. 在根目录中配置 tsconfig.json:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
    "extends": "./path.tsconfig.json",
    "compilerOptions": {
    "target": "es5",
    "lib": [
    "dom",
    "dom.iterable",
    "esnext"
    ],
    }
    }
  5. yarn start 重启项目即可。