React 使用 @ 引入文件报错 (react @别名配置craco)

react ，vue 初始项目都是不支持 @ 别名引入文件的。

• vue 一般项目初始化的时候会 在 vue.config.js 文件中配置好，所以不需要我们自己配置
• react 初始化的时候是没有配置的， 需要我们自己配置

参考文章 1@·甘之如饴·

参考文章 2@Seven 遇见

解决办法 （react 配置方法,参考文章 1）

1. 在 react 项目根目录下，生成一个 craco.config.js 文件,然后写入下面代码 (跟 package.json 文件同级)

// craco.config.js  文件
const path = require("path");
module.exports = {
  webpack: {
    alias: {
      "@": path.join(__dirname, "src"),
    },
  },
};

2. 在 package.json 文件中，重新配置 启动命令（如下）。

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

上述操作做完之后,重新启动项目 即可解决因为路径问题的报错.