配置别名路径 @

purpleseashell_Lili2025-05-16 18:49

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

1. 路径解析配置（Webpack）-- craco 插件

把 @/ 解析为 src/

配置步骤：

1.安装 craco

javascript 复制代码

npm i -D @craco/craco

craco.config.js

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

javascript 复制代码

const path = require("path");

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

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

javascript 复制代码

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

2. 路径联想配置（VsCode）-- jsconfig.json

VsCode在输入 @/ 时，自动联想出对应的 src/ 下的子级目录

javascript 复制代码

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