vue3项目配置别名
- src别名的配置
- TypeScript 编译配置
- 如果出现@/别名引入报找不到的问题
src别名的配置
在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！
// 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 编译配置
// tsconfig.json
// tsconfig.app.json 如果此文件存在，此文件也定要修改
{"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { //路径映射，相对于baseUrl"@/*": ["src/*"] }}
}
如果出现@/别名引入报找不到的问题
问题描述，如在router/index.ts中，引入组件 component:()=>import(‘@/views/login/index.vue’),@/*报错，并且有趣的是运行可以，但打包报错。
解决方法 也可尝试手动声明,创建shims-vue.d.ts文件
// 创建shims-vue.d.ts文件
declare module '*.vue' {import { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}
