1.说明
在react项目中想要使用@代替“src/”需要在项目根目录下配置两个文件,craco.config.js和sconfig.json;
craco.config.js配置文件是用于项目解读@为“src/”
jsconfig.json配置文件是用于vsCode在编辑过程是输入@后可以将src下的文件目录进行自动联想提示,便于编码
2.安装插件
npm i -D @craco/craco
3.配置craco.config.js
在根目录下新建craco.config.js文件
const path = require('path')
module.exports = {
webpack:{
alias:{
"@":path.resolve(__dirname,"src")
}
}
}
更改package.json配置项
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
更改为
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
4.配置jsconfig.json
在根目录下新建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
}
}
5.测试
重新启动项目,运行命令不用变
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » react中配置路径别名@
发表评论 取消回复