vue3 Vite + typescript 使用别名引入文件
在Vue3项目中使用Vite和TypeScript时，你可以通过在vite.config.ts中配置别名来简化文件的引用。以下是一个如何设置别名的例子：
首先，在vite.config.ts文件中配置别名：
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'components': path.resolve(__dirname, './src/components'),
// 添加更多别名
},
},
});然后，你可以在TypeScript和Vue文件中使用这些别名来简化导入：
// 使用单个字符的别名
import HelloWorld from '@/components/HelloWorld.vue';
// 使用别名目录
import SomeComponent from 'components/SomeComponent.vue';确保你的IDE支持这种别名，或者你可能需要在jsconfig.json或tsconfig.json中配置别名，具体取决于你的项目设置。
评论已关闭