一、简单 jsconfig.json 配置
在根路径下新建 jsconfig.json 可以让 IDEA识别项目的别名(如:@)
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
二、vue 项目vue.config.js 设置
在 vue 项目中,vue.config.js 设置 alias 别名来引入文件,在使用VSCode时发现别名路径智能提示不能使用
configureWebpack: {
resolve: {
alias: {
"@": resolve("src"),
"@i": resolve("src/api"),
"@c": resolve("src/components"),
"@a": resolve("src/assets"),
"@s": resolve("src/styles"),
"@u": resolve("src/utils"),
"@v": resolve("src/views")
}
}
}
项目目录
├── src
│ ├── api
│ ├── componests
│ │ └── HelloWorld.vue
│ ├── assets
│ ├── styles
│ ├── utils
│ └── views
└── jsconfig.json
在项目根目录下新建一个 jsconfig.json 文件
jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@i/*": ["src/api/*"],
"@c/*": ["src/components/*"],
"@a/*": ["src/assets/*"],
"@s/*": ["src/styles/*"],
"@u/*": ["src/utils/*"],
"@v/*": ["src/views/*"]
}
},
"exclude": ["node_modules", "dist"]
}
注意:配置完成之后重启VSCode
示例:在使用组件 HelloWorld.vue 的时候智能提示可以使用。
// @c is an alias to src/components
import HelloWorld from “@c/HelloWorld.vue”;