问题描述

在使用vite + ts的进行开发时，在配置好了tsconfig.json和vite.config.ts之后，在vue文件中可以使用@/别名，但是在ts文件中无法使用，会爆错：vite+ts 找不到模块“@/views/index.vue”或其相应的类型声明。ts(2307)。

不正确的做法

在互联网上，你能看见很多博客、或问答，给你的答案是：在根目录下新增一个vue.d.ts文件来声明vue类型，写如下的代码：

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
 }

但这种做法无异于自欺欺人，饮鸩止渴，这样做之后你会发现vscode其实无法找到vue模块对应的位置，用Ctrl + 鼠标左键无法跳转（只会跳转到vue.d.ts文件），即便你写错了路径，也不会报错。

正确的做法

不仅仅要配置tsconfig.json，还需要配置tsconfig.app.json和tsconfig.node.json，里面都要加上如下配置：

"compilerOptions": {
	// ... 其他配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    },
  },

如果还没有解决，可以尝试安装vscode拓展：TypeScript Vue Plugin (Volar)。

修改完成后重启vscode。