解决ts和vetur无法识别alias路径别名的bug

问题呈现

在实际开发中，引入自定义模块我们一般使用相对路径，代码如下

    import request from '../utils/request'
    import Layout from '../layout/Layout.vue'

很显然，随着项目目录结构不断复杂，相对路径也就变得难以维护，可能会变成：

    import request from '../../utils/request'
    import Layout from '../../layout/Layout.vue'

这样的代码如果出现在你的项目中，维护成本可想而知，所以我们一般会使用路径别名来表示某一个路径，如最常见的使用@表示src目录，以webpack和vite为例，配置如下

    {
        // 其它配置
        resolve:{
            alias:{
                '@':path.join(__dirname,'src')
            }
        }
    }

配置完成后，我们就可以像下面这样引用了（webpack需要重启项目）

    import request from '@/utils/request'
    import Layout from '@/layout/Layout.vue'

以后不管在哪引入模块，都不需要修改路径了

但，随之而来的问题是像eslint、vetur、typescript这些工具无法识别，从而导致报错

Cannot find module '@/utils/request' or its corresponding type declarations.Vetur(2307) Cannot find module '@/utils/request' or its corresponding type declarations.ts(2307)

效果如下:

解决方案

1、解决ts报错

这个很简单，只需要在tsconfig.json中配置paths属性即可

    {
        "compilerOptions": {
            // ...省略其他选项
            "paths": {
              "@/*":["src/*"]
            } 
        }
    }

2、解决vetur报错

这个报错一般是由于你的VSCode 中安装了 Vetur 插件，它要求项目必须满足以下要求：

1. 项目在工作区根目录（不能嵌套其它目录）

   

2. 项目排在第一位 如在VSCode根目录下有多个项目，需要拖动到第一位

3、解决eslint报错

报错：unable to resove path to module '@/utils/request'. eslint(import/no-unresolved)

虽然我们vite中已经配置了alias路径别名，但是eslint并不能读取我们vite中的配置，需要eslint-import-resolver-alias这个插件来实现，步骤如下：

1. 安装

       npm install -D eslint-import-resolver-alias
   

2. 配置eslint

       // .eslintrc.js
       module.exports = { 
           // ...省略其它配置 
           settings: { 
               "import/resolver": { 
                   alias: [
                       ["@", "./src"]
                   ], 
               }, 
           }, 
     }