首页 / 前端 / React.js / react使用craco配置@符号作为src文件路径
react使用craco配置@符号作为src文件路径
歪脖37684 React.js
1389浏览
2022-04-27 21:02:07

在使用react时,导入组件经常会出现'…/…/…/'来指代文件所在文件夹,很不美观,在vue中使用@符号指向src目录,所以仿照vue来配置src路径;

1:安装

npm i @craco/craco

2:修改package.json文件,将craco作为执行文件

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

3:配置craco.config.js

在根目录新建craco.config.js文件

const path = require("path")//导入path模块
//定义函数resolve,将你想要自定义的路径和js的根路劲作拼接
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  webpack: {
    alias: {
       // 名称:路径
      "@": resolve("src")
    }
  }
};
相关推荐