2024-07-16 Cannot find module '@/views/home.vue' or its corresponding type declarations. ==》 @路径配置问题，要修改2个地方

新建一个页面，引入该页面路径，想用@符号代替../之类的操作时

// index.ts
export default [
    {
        path: '/',
        name: 'home',
        component: () => import("@/views/home.vue")
    }
]

报错：Cannot find module '@/views/home.vue' or its corresponding type declarations.（找不到模块“@/views/home.vue”或其相应的类型声明。）

原因：ts文件不识别以@符号引用的路径。注意，这里需要改2个地方，一个是tsconfig.json文件（用于处理编译器爆红问题），另一个是vite.config.ts文件（用于处理运行时爆红问题）。

解决方案：

一、tsconfig.json：

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

添加baseUrl和paths块代码即可，如果添加了编译器还是爆红，那么重启一下编译器就行了。

二：vite.config.ts：

import { resolve } from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
    // ...
    resolve: {
        alias: [
            {
                find: '@',
                replacement: resolve(__dirname, 'src'),
            },
        ],
        extensions: ['.ts', '.js'],
    },
// ....

保存即可。

注：准确来说改vite.config.ts文件就行，不报错不影响使用即可。