配置@别名路径，把@/ 解析为 src/

路径解析配置 webpack

安装 craco
npm i -D @craco/craco

项目根目录下创建文件 craco.config.js ，内容如下

const path = require('path')
module.exports = {
    webpack: {
        // 配置别名
        alias: {
            // 约定： 使用@ 表示src文件所在路径
            '@': path.resolve(__dirname,'src')
        }
    }
}

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

经过以上配置，可以用@/home 替换 ./home , 但输入 @/ 时没有给出路径下 文件名提示

创建jsconfig. json文件， 内容如下：

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

路径解析配置 Vite

修改Vite配置

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

提示：找不到模块'path'，需安装

npm i @types/node -D

还需配置 jsconfig. json

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

}