vue3+ts+vite 路径别名配置

在Vue3 + TypeScript + Vite项目中配置路径别名，你需要在项目根目录下的vite.config.ts文件中使用resolve.alias配置选项。

以下是一个配置路径别名的例子：

// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig({
  resolve: {
    alias: {
      // 添加一个别名 "@components" 指向 "src/components" 目录
      '@components': path.resolve(__dirname, 'src/components'),
      // 你可以根据需要继续添加更多别名
    },
  },
});

在TypeScript中，你还需要在tsconfig.json中添加相同的别名配置，以确保TypeScript正确解析别名。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".", // 这需要和vite.config.ts中的path.resolve(__dirname, ...)保持一致
    "paths": {
      "@components/*": ["src/components/*"]
      // 添加别名映射
    }
    // ...
  },
  // ...
}

配置完成后，你可以在项目中这样使用别名：

// 在Vue组件或其他TypeScript文件中
import MyComponent from '@components/MyComponent.vue';
 
// Vite将会把"@components/MyComponent.vue"解析为"src/components/MyComponent.vue"

别名配置允许你使用更短的导入路径，提高代码的可读性和可维护性。