项目中为什么要设置alias
- 项目中会设置alias(别名),避免通过…/…/导入
- 打包效率增加,避免自己找错文件层级
vue中设置alias
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('./src/assets'))
.set('components',resolve('./src/components'))
}
ctrl+鼠标左键点击导入文件路径中带别名的
- 项目中,ctrl+鼠标左键点击导入文件路径中带别名的,会识别不出来,没有快捷跳转
- import baseDiaLog from ‘components/baseDiaLog.vue’
解决带alias快捷跳转失败
- 可以在根目录加一个jsconfig.json文件,然后就可以了
{
"compilerOptions": {
"target": "ES6",
"jsx": "react",
"baseUrl": "./",
"paths": {
"components/*": ["src/components/*"],
"assets/*": ["src/assets/*"],
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"],
"include": ["src/**/*"]
}
- Vscode中下载插件
vscode《别名路径跳转》插件
- 在设置.json中加
- 设置按ctrl+shift+p,打开设置,右上角点击设置icon(折页的纸张)
"alias-skip.mappings": {
"@": "/src", // 默认只有`@`映射,映射到`/src`,你可以添加更多映射,映射路径必须以`/`开头
"components": ["/src/components"],
"assets": ["/src/assets"]
// ...更多映射关系
},