配置@别名路径,把@/ 解析为 src/
路径解析配置 webpack
安装
craco
npm i -D @craco/craco
项目根目录下创建文件 craco.config.js ,内容如下
const path = require('path')
module.exports = {
webpack: {
// 配置别名
alias: {
// 约定: 使用@ 表示src文件所在路径
'@': path.resolve(__dirname,'src')
}
}
}
包文件中配置启动命令和打包命令
经过以上配置,可以用@/home 替换 ./home , 但输入 @/ 时没有给出路径下 文件名提示
创建 jsconfig.json 文件, 内容如下:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
}
}
路径解析配置 Vite
修改Vite配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})
提示:找不到模块‘path’,需安装
npm i @types/node -D
还需配置
jsconfig.
json
{
"compilerOptions": {
"jsx": "react",
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
}