vite+ts:找不到模块“@/views/xx”或其相应的类型声明

• 今天朋友问我一个问题，vite+tsx+vue搭建项目的时候，import为什么不能省略vue后缀名了，会报错：找不到模块“../views/xxx”或其相应的类型声明。

• 其实是因为vite已不再默认忽略.vue扩展名，所以你要把vue后缀写全，import “../views/xxx.vue”

• 然后又遇到了一个问题，当使用import "@/views/xxx.tsx"或者import "@/views/xxx"的时候，报错：找不到模块“@/views/404”或其相应的类型声明。

• 问题出在@，需要在vite.config里面进行配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
})

• 然后发现vscode里面依旧提示错误：找不到模块
• 可是我们运行一下：npm run dev，会发现它是正常运行，所以问题在tsconfig或者jsconfig文件配置，：

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

• 至此问题解决