#vscode中vue文件路径别名后路径提示

在我们开发vue项目时，经常会碰到页面结构层级比较多, 导入组件时频繁使用 ../../ 这样的方式, 这样导入组件比较复杂, 我们可以使用 webpack 配置别名来减少层级

#别名配置

别一听说要用 webpack 来配置心里就慌的一匹, 莫慌, 别被自己吓到了, 现在 vue cli 脚手架的 3.x 及以上都把 webpack 的一些配置都内置了, 还没学 webpack 的小伙伴不用担心, 这并不影响你使用该技巧, 在 vue 的项目根目录下创建 vue.config.js 文件, 并添加别名配置

          
1
2
3
4
5
6
7
8
9
10
11
          // vue.config.js
module.exports = {
  // ... 其它配置不用动
  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src")
      }
    }
  }
}

        

在项目中就可以使用别名 @ 导入组件了, 也不会编译失败, 是不是很简单！

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
          <template>
  <side-bar />
</template>
<script>
  import SideBar from "@/components/SideBar";
  export default {
    data() {
      return {}
    },
    components: {
      SideBar
    }
  }
</script>

        

但这样又碰到另一个问题,那就是使用了别名后路径并没有提示, 这样就没法看到组件名, 如果要使用组件名字比较长, 记不住, 还需要复制组件名, 然后粘贴到要使用的地方, 感觉操作反而变得更繁琐了, 别担心, 还有后续操作, 别离开哦！

#路径提示

我们还需要在项目根目录下创建一个 jsconfig.json 文件, 用来解析路径

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
          // jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
  "exclude": [
    "node_modules"
  ]
}

        

这样导入组件的时候使用别名就会有路径提示了, 如果没有生效, 重启下 vscode, 你学会了吗？