在开发过程中，我们经常需要导入各种组件、各种样式文件、接口 api 等等，因此会出现许多类似./和../等这种路径，如果层级嵌套的较多的话，则会出现许多../../ 这种，写起来非常麻烦，那么有没有什么办法能够像 vue 那样的，直接写路径别名，然后会自动给你指定到某一个文件夹下呢？当然是可以的，这就需要我们配置路径别名了。

配置路径别名，这里用到了第三方库，就是 @craco/craco

1、安装 @craco/craco

npm install @craco/craco

2、创建 craco.config.js 配置文件 (切记，项目根目录下创建)

const path = require('path')
module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

3、修改 package.json 中脚本命令，配置启动和打包命令

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

现在，重新启动项目，就可以使用路径别名 @符号来代替 */src 路径了

如果在 vscode 中开发时，我们手动输入 @符号时，发现没有路径提示，这时候需要我们在项目根目录下创建 jsconfig.json 文件（ts 中则为 tsconfig.json）增加如下配置

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
        "@/*": [
            "src/*"
        ]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

此时，就可以愉快地使用路径别名来开发了。