Ts＋Vue3＋Vite如何配置@路径

由vite创造的ts加vue3会有三个ts.json文件 因此不需要include其他路劲，

配置tsconfig.json:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    // ...其他配置...
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"] // 确保 @ 指向 src 目录
    },
    "types": ["node"] // 添加Node.js类型声明
  },
}

2，修改src下的vite-env.d.ts

/// 
// src/vite-env.d.ts
declare module '*.vue' {
    import { DefineComponent } from 'vue';
    const component: DefineComponent<{}, {}, any>;
    export default component;
}

3，配置vite.config

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

// 获取当前目录名
// const __dirname = dirname(new URL(import.meta.url).pathname)

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss()
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'), // 将 @ 指向 src 目录
    },
  }
})

4.如果报错了可能是没下Node.js的类型声明包

pnpm install --save-dev @types/node