常用配置src路径别名@（含ts项目、craco）

首先在craco.config.js中进行配置（craco.config.js文件就是用来对webpack进行二次配置的）

const path = require("path");
// 项目的配置文件
module.exports = {
    webpack:{
      alias:{
          "@":path.resolve(__dirname,"./src")
      }
    },
    devServer:{
        port:80,// 设置商口号为80
        //此处是配置域名，需要在【C:\Windows\System32\drivers\etc】添加【127.0.0.1 zhangsan.com】
        host:"zhangsan.com"
    }
}

第二步包含以下两种方案（推荐第二种）

方案一：修改tsconfig.json 如下所示

{
  "compilerOptions": {
    "baseUrlCommon": "基准目录",------我是新添加的起始
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    },--------------------------------我是新添加的结束
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

方案二：（推荐--->因部分脚手架项目会重置修改tsconfig文件第一种方案可能会被重置）

1、项目根目录中创建一个名字为path.tsconfig.json的文件   

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        }
    }
}

2、修改tsconfig.json文件，继承path.tsconfig.json文件，该行写在tsconfig.json的首行！

  "extends": "./path.tsconfig.json",