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

·  阅读 1159

问题呈现

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

    import request from '../utils/request'
    import Layout from '../layout/Layout.vue'
复制代码

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

    import request from '../../utils/request'
    import Layout from '../../layout/Layout.vue'
复制代码

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

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

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

    import request from '@/utils/request'
    import Layout from '@/layout/Layout.vue'
复制代码

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

但,随之而来的问题是像eslintveturtypescript这些工具无法识别,从而导致报错

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

效果如下:

image.png

解决方案

1、解决ts报错

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

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

2、解决vetur报错

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

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

    image.png image.png

  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"]
                    ], 
                }, 
            }, 
      }
    复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改