React 配置目录别名

采用的方法是通过使用craco修改隐藏的webpack.js

1。安装craco

"react-scripts": "5.0.1",

npm i @craco/craco@alpha -D

"react-scripts": 版本小于5

npm i @craco/craco

2.在项目的根目录下新建craco.config.js文件

const path = require('path') //引入path 

const resolve = dir => path.resolve(__dirname, dir) //解析路径 并在路径后面拼接

module.exports = {
    webpack: {
        alias: {
            '@': resolve('src') // 在路径后拼接src
        }
    }
}

3.在tsconfig.json文件中配置baseUrl 和 paths

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