React如何配置src根目录@

React如何配置src根目录@

1.打开webpack配置文件

yarn eject or npm run eject

如果报错了记得提前 git commit一下

2.配置webpack

找到 webpack.config.js 文件在 webpack.config.js 文件中找到 alias 配置在alias里添加'@': path.resolve('src') , 或者 '@': path.join(__dirname,'../src'),

重新npm start即可

React 项目中配置 `@` 符号来代替 `src` 目录

1. 主要是修改两个配置文件：craco.config.js 和 tsconfig.json。

// craco.config.js
const path = require("path");
//定义函数resolve,将你想要自定义的路径和js的根路劲作拼接
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
    webpack: {
        alias: {
          //名称:路径
          "@": resolve("src")
        }
    }
}
// tsconfig.json 用来解决 TS 找不到类型定义的报错（JS 用户请跳过）
{
    "compilerOptions": {
        "paths": {
          "@/*": ["src/*"]
        }
    }
}

2. 主要是为了解决../../这种引入路径，一个是避免文件层级过深，太多../../不雅观且容易出错，一个是如果调整文件目录，涉及到层级变化时，平白增加多余工作量。

到此这篇关于React如何配置src根目录@的文章就介绍到这了,更多相关React配置src根目录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！