vue3+vite+ts 配置路径别名映射

安装依赖包

npm install @types/node --save-dev

配置 vite.config.ts

打开vite.config.ts 文件，添加如下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

配置 tsconfig.json和tsconfig.app.json

注意：可能会出现以下情况，即main.ts文件中识别的是tsconfig.app.json配置的路径映射，而不是tsconfig.json配置的路径映射，而vue页面识别的是tsconfig.json配置的路径映射，而不是tsconfig.app.json配置的路径映射，暂时不清楚为什么会这样，因此最好两个文件都做配置。

打开 tsconfig.json 和 tsconfig.app.json 文件，在 compilerOptions 中添加如下内容：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

使用路径别名

main.ts

import router from '@/router'
import App from '@/App.vue'

index.vue

import { LoginData } from "@/types/login"