vue-cli 中的 alias 谜团

前端

2024-01-10 12:54:58

朋友们，大伙儿一定遇到过vue-cli4中alias配置不生效的糟心事吧？我前些日子也被这个问题折腾得够呛。项目中的小伙伴吐槽，配置的 alias 怎么不管用，引用模块非得用默认的`@`别名才行，直接使用模块名配置压根儿不生效。

举个例子，当模块路径老长的时候，小伙伴们写起代码来别提多别扭了。本想着alias可以帮忙解决这个问题，结果根本没用。我寻思着这肯定哪不对劲啊，于是就吭哧吭哧地把vue-cli的源码翻了个底朝天，最后终于发现了问题的根源。

现在，我决定把这个奇葩的问题以及背后的原理和大家伙儿好好聊聊。

1. webpack 的模块解析过程

想要弄明白 alias 为啥不生效，首先得搞清楚 webpack 是怎么解析模块的。webpack 在解析模块时，会经历以下几个步骤：

尝试从当前目录加载模块。
如果在当前目录找不到，就从 node_modules 目录中查找。
如果在 node_modules 中也找不到，就从其他配置的路径中查找。
如果还是找不到，就报错。

2. alias 的工作原理

alias 的作用就是在模块解析过程中，将一个模块路径映射到另一个模块路径。举个例子，我们可以将 @/components/Button 映射到 src/components/Button.vue。这样，在代码中直接使用 @/components/Button 就相当于引用了 src/components/Button.vue。

3. alias 的局限性

alias 虽然好用，但也有它的局限性。它只能映射文件路径，不能映射目录。这意味着，如果你想映射一个目录，就必须为目录中的每个文件配置一个 alias。

4. vue-cli 中 alias 的配置

在 vue-cli 中，alias 是通过 webpack 的 resolve.alias 配置项来配置的。该配置项是一个对象，其中键是需要映射的模块路径，值是要映射到的模块路径。

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};

5. 问题根源

回到我们的问题上，vue-cli4 中 alias 配置不生效的原因是，我们直接使用模块名配置 alias，而没有使用相对路径。正确的做法应该是这样：

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '~': path.resolve(__dirname, 'src'),
    },
  },
};

这样配置后，我们就可以在代码中直接使用 ~/components/Button 来引用 src/components/Button.vue 了。