vite配置目录别名，处理报错：找不到模块或其相应的类型声明

ts文件处理报错：找不到模块或其相应的类型声明

首先我们需要安装node的类型声明文件，要不然ts可能会报警告

npm install @types/node -D

之后我们在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中compilerOptions下增加以下配置

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

vue文件处理报错：找不到模块或其相应的类型声明

在src 目录下找到vite-env.d.ts文件 将下方代码粘贴即可解决

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
  }