路径别名路径别名真的有必要吗？事实上，路径别名的核心解决的问题是相对路径引用不知道要写几个上级目录可以回到根目录，从而能

在项目开发中，我们习惯设置路径别名。下面总结一下关于路径别名的配置

vite中设置路径别名

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: "@views",
        replacement: resolve(__dirname, "./src/views"),
      },
      {
        find: "@components",
        replacement: resolve(__dirname, "./src/components"),
      },
      {
        find: "@",
        replacement: resolve(__dirname, "src"),
      },
    ],
  },
});

webpack中设置路径别名

function resolve() {
  return path.join(__dirname, '..', dir)
}
configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js',
        '@': resolve('src')
      }
    }
  },

设置路径别名的作用

设置路径别名可以不使用相对路径去引入依赖。通常使用的import '../../path'就可以从代码的根目录直接向子目录引用。不用计算相对路径的层数，直接import '@/assets/pic.png'。

这里的设置只是对编译的设置，也就是保证编译解析时能正确找到对应的依赖。但是这里的使用不能为开发工具vscode所识别。所以vscode并不能找到对应的依赖模块。如果找不到对应的模板就无法显示在函数上加的注释

设置vscode中的路径别名

那如何在vscode中设置路径别名呢。有jsconfig.json或tsconfig.json配置文件可以配置。在项目根目录中生成对应的配置文件，并添加如下配置

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": [
    "node_modules"
  ]
}

实践感悟

路径别名真的有必要吗？事实上，路径别名的核心解决的问题是相对路径引用不知道要写几个上级目录可以回到根目录，从而能正确引用到自己要使用的依赖。但是随着vscode的升级，填写相关路径时可以自动提示当前目录的内容。从而可以方便的写出正确的相对路径。路径别名的设置也就什么意义了。