前言
- 什么是
@
别名路径?- 通过
@
替代src
路径,方便开发过程中的路径查找访问;
- 通过
- 什么是路径联想?
- 就是当我们输入
/
的时候,会有相应的文件目录提示;
- 就是当我们输入
- 在 React 中,我们不能直接使用
@
去表示src
文件夹,需要额外的配置; - 下面就来一起看看怎样配置吧;
- 针对 路径转换 ,修改
webpack
别名路径配置craco
(三方包);- 针对 路径联想 ,修改
VSCode
配置jsconfig.json
;
一、配置别名路径
1.1 安装 craco 工具包
- 这个工具包是专门在
cra
环境下扩展webpack
的一个工具包; yarn add @craco/craco -D
;
1.2 增加 craco.config.js 配置文件
- 在 项目 根目录 下新增;
js
// 从 node 中导入 内置的 path 模块
const path = require('path');
module.exports = {
// webpack配置
webpack: {
// 配置别名
alias: {
// 约定使用 @ 表示 src 文件所在目录
'@': path.resolve(__dirname, 'src')
}
}
};
1.3 修改 script 命令
- 目标文件:
package.json
- ❗ 修改完之后 记得 重启项目;
二、VSCode提示配置
- 在项目 根目录 下新增
jsconfig.json
; - 该文件是针对
VSCode
编译器配置的,当打开编译器的时候,编译器会自动读取该文件里面的配置项;
json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}