Configuration of src aliases
When developing a project, the relationship between files and files may be complicated, so we need to configure an alias for the src folder! ! !
// vite.config.ts
import {
defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve("./src") // 相对路径别名配置,使用 @ 代替 src
}
}
})
TypeScript compilation configuration
// tsconfig.json
{
"compilerOptions": {
"baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录
"paths": {
//路径映射,相对于baseUrl
"@/*": ["src/*"]
}
}
}
Solution to WebStorm reporting red wavy line
Volar: Cannot find module '@/components/Test.vue' or its corresponding type declarations.