在react中如何配置@路径别名,或其他配置(不使用eject)

在一个项目中,如果在引入文件时, 频繁用 ../ ./ 会很繁琐,且不易维护那么下面讲解如何在react中配置路径别名

1、安装 react-app-rewired customize-cra 包

npm install react-app-rewired customize-cra --save-dev

2、在项目根目录也就是package.json平级目录,新建一个config-overrides.js文件

const { override, addWebpackAlias } = require("customize-cra")
const path = require("path");
module.exports=override(
    //引入插件写相关配置
  addWebpackAlias({
    "@" : path.resolve(__dirname, "src")
  })
)

3、在package.json更改命令

"scripts": {
    "dev": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

​

4、应用

5、使用时路径提示

（1）在项目根目录也就是package.json平级目录，创建jsconfig.json配置文件

（2）在配置文件中书写一下配置代码

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

（3）VSCode会自动读取jsconfig.json中的配置让vscode知道@就是src目录