vue3 vite ts 使用@导入文件

在Vue 3、Vite 和 TypeScript 的组合中，使用 `@` 符号导入文件通常是在利用路径别名（alias）的功能。Vite 提供了便捷的方式来管理项目中的路径映射，尤其是在处理像 @vue/cli 这样的构建工具生成的项目结构时。

假设你在 `src/components` 目录下有一个名为 `MyComponent.vue` 的文件，你可以通过在 `.viteignore` 文件（或者在 Vite 配置 `vite.config.ts` 中）设置别名，然后在 TypeScript 中使用 `@/components` 或者自定义的别名来导入：

// .viteignore (如果在配置中)
/@components/

// vite.config.ts
import { defineConfig } from 'vite'
import { createVuePlugin } from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    createVuePlugin()
  ],
  alias: {
    components: path.resolve(__dirname, 'src/components')
  }
})

// 在你的组件文件中导入
import MyComponent from '@/components/MyComponent.vue'

这样，无论组件的实际位置如何，都可以通过 `@/components` 来相对统一地引用它们。