配置路径别名---React

 1.安装修改webpack的 CRA 配置的包：npm i @craco/craco -D

 2.在项目根目录创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名

const path = require("path");

module.exports = {
  // webpack 配置
  webpack: {
    //配置别名
    alias: {
        '@': path.resolve(__dirname, 'src')
    },
  },
};

 3.修改 package.json

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

4.使用

import { createBrowserRouter } from "react-router-dom";

// 引入组件
import Layout from "@/pages/Layout";
import Login from "@/pages/Login";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
  },
  {
    path: "/login",
    element: <Login />,
  },
]);

export default router;

5.jsconfig.json---使用@可以有提示

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