Vite+Vue3+TypeScript页面引入ts 或vue提示找不到模块“@/xxx/xxx.ts“,“@/xxx/xxx.vue“或其相应的类型声明

在我们使用vite构建的vue3+ts项目时,我们通常会遇见一种情况就是,找不到@/xxx模块

第一种情况是我们在ts文件中需要引入vue组件,例如:

const routes = [
  {
    path:"/login",
    component:()=>import('@/view/Login.vue')
  },
]

此时我们会遇见一个报错找不到模块"@/xxx/xxx.vue"或其相应的类型声明

第二种情况就是我们在vue组件中需要引入ts文件,例如:

import { login } from '@/api/LoginApi'

此时我们会遇见一个相似的报错找不到模块"@/xxx/xxx.ts"或其相应的类型声明

我们可以通过修改一下文件的配置来完全消除这些报错

第一个是我们的tsconfig.json文件,直接把这个复制粘贴进去

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "typings",
    "src/.env"
  ]
}

第二个文件是vite-env.d.ts文件,这个文件如果没有的话可以在src目录下直接创建一个,然后把下面的代码直接一整个复制粘贴进去

/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const vueComponent: DefineComponent<{}, {}, any>;
  export default vueComponent;
}

第三个就是我们配置@别名的时候,我们在vite.config.ts文件中加入一下配置就可以识别@的别名,这里放的是我的一整个vite.config.ts文件,大家缺什么就引入什么,
在修改vite.config.ts文件之前我们需要使用npm下载一个@types/node的包

npm i @types/node

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'),
    },
    //在引入文件的时候自动加上后缀,配置这个之后就不用写后缀
    //但是在vue-router的index.ts中引入vue组件依旧需要加.vue的后缀
    extensions: ['.js', '.ts', '.json', '.vue']
  }
})