Vue.js - 使用alias配置导包路径的别名教程（为路径起别名）
作者：hangge | 2026-03-17 08:34
Vue CLI 不仅可以帮助我们创建 Vue 项目，还提供了一些常用的配置，方便我们对其进行扩展和自定义，比如 outputDir、assetsDir、alias、devServer 和 chainWebpack 等。这些配置必须编写在项目根目录的 vue.config.js 文件中。 下面我将介绍如何使用 alias 配置导包路径的别名。
（2）如果想要改成从 @/components/HelloWorld.vue 路径或者 components/HelloWorld.vue 路径中导入该组件，那么需要配置一下 @ 路径或者 components 路径别名。我们在 vue.config.js 文件的 chainWebpack 函数中配置如下路径别名即可。
（3）这样以后在使用 import 导包时，可以直接使用该别名了。下面样例分别使用 @ 别名和 components 别名来导入 HelloWorld 组件。
1，基本介绍
（1）webpack 有一个非常好用的功能是配置别名 alias。例如，当项目的目录结构比较深时，或一个文件的路径可能需要使用“../../../”这种路径片段来导包，但这样对代码的可读性和维护性都不友好。
（2）这时，我们可以为常见的路径起一个别名，在简化路径的同时提高了代码的可读性和可维护性。
（3）我们可以在 vue.config.js 文件中的 chainWebpack 属性上配置 alias。 chainWebpack 是一个函数，该函数会接收一个基于 webpack-chain 的 config 实例，允许对 webpack 配置进行更细粒度的修改。
2，使用样例
（1）例如下面代码中可以看到，从 ../components/HelloWorld.vue 路径中导入了 HelloWorld 组件
（2）如果想要改成从 @/components/HelloWorld.vue 路径或者 components/HelloWorld.vue 路径中导入该组件，那么需要配置一下 @ 路径或者 components 路径别名。我们在 vue.config.js 文件的 chainWebpack 函数中配置如下路径别名即可。
提示：默认情况下，@ 就指向 src 目录。也就是说我们不用特意配置就可以直接使用@别名。
const { defineConfig } = require("@vue/cli-service");
const path = require("path");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack: (config) => {
config.resolve.alias
// 配置 @ 指向 src（默认已有，可以覆盖）
.set("@", path.resolve(__dirname, "src"))
// 新增 components 指向 src/components
.set("components", path.resolve(__dirname, "src/components"));
},
});
（3）这样以后在使用 import 导包时，可以直接使用该别名了。下面样例分别使用 @ 别名和 components 别名来导入 HelloWorld 组件。
import HelloWorld from '@/components/HelloWorld.vue'; import HelloWorld from 'components/HelloWorld.vue';
全部评论（0）