如何在Vue项目中配置路径别名

如何在Vue项目中配置路径别名

​

首先在当前项目的根目录下创建一个 vue.config.js 的文件，这个文件在Vue脚手架3中不会自己创建，需要自己手动创建，创建完成后添加如下代码：

module.exports = {
    //配置别名
    configureWebpack: {
        resolve: {
            alias: {
                'views': '@/views',
                'components': '@/components',
                'network': '@/network',
                'common': '@/common',
                'assets': '@/assets',
            }
        }
    },
}

上述代码中 alias对象中的 键 相当于路径的别名 而 值 相当于具体的路径

这样我们的路径别名就配置好了，在项目中我们再也不需要用到类似 …/…/ 这样的路径形式了，

下面是一个代码对比演示：

1. 没有配置路径别名
   

2. 配置了路径别名
   

   有了路径别名我们再也不需要考虑什么当前文件夹的上一层的上一层… 可以直接找到src目录下的文件夹

   需要注意的是 当别名应用于html标签或者css样式里面时，需要在路径别名的前面加上一个 ~ 符号，如下图：