vue中使用别名不能提示路径

在 vue 中开发中我们常常会使用别名的方式进行开发，这样会使我们的文件路径更加清晰，也方便后面的维护，不至于后面看到的都是 ../../../ 等这样的代码（想刀人😄）。 我们会在配置文件中配置 alias , 如下图：

配置完成后在项目中就可以使用这些别名了，使用如下：

这时我们会发现一个问题，就是我们无法通过鼠标点击的方式进行文件或者方法的跳转了🤔，那么为了方便我们开发，就要去解决这问题，我们需要对 jsconfig.json or tsconfig.json

配置如下：

{
  "compilerOptions": {
    ...配置
    "paths": {
      // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
      "@/*": ["./src/*"],
      "@assets/*": ["./src/assets/*"],
      "@components/*": ["./src/components/*"],
      "@config": ["./src/config"],
      "@router/*": ["./src/router/*"],
      "@store/*": ["./src/store/*"],
      "@utils": ["./src/utils"],
      "@views/*": ["./src/views/*"],
      "@types/*": ["./src/types/*"],
      "@api/*": ["./src/api/modules/*"],
      "@routes/*": ["./src/routes/*"]
    }
    ...配置
  }
}

此时我们回到代码中会发现已经可以正常跳转了，代码也没有报红了。😄

tip：配置中有 * 号，就是当前目录下的子目录也可以访问，如果需要的文件在当前目录则不需要添加 * 号。