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

1,在一个项目中,如果在引入文件时, 频繁用 ../    ./ 会很繁琐,且不易维护

那么下面讲解如何在react中配置路径别名

1, 安装 react-app-rewired customize-cra

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

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

   并在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,view中使用

这样通过npm run dev 重启项目就可以了