【React】路由别名

方法一：配置vite.confing.ts

安装插件

npm i @type/node -D

路径别名配置vite.confing.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

import path from 'path'  //添加的插件

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  
  //添加的配置
  resolve: {
    alias: {
    //配置路径别名
      '@': path.resolve(__dirname, 'src')
    }
  }
})

联想配置

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": [
      "ES2023"
    ],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": ".",               //!!!配置的当前目录baseUrl
    "paths": {                   //配置path用@自动配置到src的子目录
      "@/*": [
        "src/*"
      ]
    },
    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": [
    "vite.config.ts"
  ]
}

方法二：安装craco

别名路径配置

1.路径解析配置(webpack)，把 @/解析为 src/ 2.路径联想配置(VsCode)，VsCode 在输入 @/ 时，自动联想出来对应的 src/下的子级目录

路径解析配置

CRA本身把webpack配置包装到了黑盒里无法直接修改，需要借助一个插件-craco

配置步骤:

1.安装craco

npm i-D @craco/craco

2.项目根目录下创建配置文件

craco.config.js

3.配置文件中添加路径解析配置

4.包文件中配置启动和打包命令

配置

 "scripts": {
    "start": "craco start",
    "build": "craco build"
  }

添加文件

@配置

const path = require('path')

module.exports = {
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
}

联想提示

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