在tsconfig.json文件中进行以下配置:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
],
"^/*": [
"./*"
]
},
"types": [
"webpack-env",
"jest"
],
"module": "esnext",
"moduleResolution": "node",
"target": "es5",
"lib": [
"es2017",
"dom"
],
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"sourceMap": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*.ts",
"tests/**/*.ts"
],
"exclude": [
"node_modules"
]
}
其中,我们的配置中使用了 “paths” 路径映射,这样我们就可以使用 @ 符号来代替项目库的源文件路径,并在页面中使用 @ 和 / 分隔符来导入文件,例如:
import Foo from '@/components/Foo';
import Bar from '@/models/Bar';
这样就可以避免在导入时与 node_modules 冲突。