首先在craco.config.js中进行配置(craco.config.js文件就是用来对webpack进行二次配置的)
const path = require("path");
// 项目的配置文件
module.exports = {
webpack:{
alias:{
"@":path.resolve(__dirname,"./src")
}
},
devServer:{
port:80,// 设置商口号为80
//此处是配置域名,需要在【C:\Windows\System32\drivers\etc】添加【127.0.0.1 zhangsan.com】
host:"zhangsan.com"
}
}
第二步包含以下两种方案(推荐第二种)
方案一:修改tsconfig.json 如下所示
{
"compilerOptions": {
"baseUrlCommon": "基准目录",------我是新添加的起始
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"]
},--------------------------------我是新添加的结束
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
方案二:(推荐--->因部分脚手架项目会重置修改tsconfig文件第一种方案可能会被重置)
1、项目根目录中创建一个名字为path.tsconfig.json的文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"./src/*"
]
}
}
}
2、修改tsconfig.json文件,继承path.tsconfig.json文件,该行写在tsconfig.json的首行!
"extends": "./path.tsconfig.json",