vue cli3-cli4 自定义路径别名

有时候我们可能经常需要对某一些模块进行引用，这些模块虽然都分文件夹了，但是他们都有一个共同的特点，就是前缀路径是相同的。

比如：

---

import Header from "@/components/default/Header";

import Sidebar from "@/components/default/Sidebar";

@/components/default这段是相同的，如果文件目录再深一些，这段代码可能在编辑器里无法一行显示了，相对来说，对于代码整体，不是很友好，所以我们可以自定义一个路径别名。

@这个别名我们都知道，他是表示src目录的，那么需要一个$cdf来表示@/components/default，怎么做呢？

配置 vue.config.js

旧版本的是配置webpack.base.conf.js文件，但是现在cli3和4都已经默认没有这个文件，采用vue.config.js来统一配置，所以我们需要有这个文件，如果你的项目里没有，自行创建即可。

引入node path模块，封装方法

由于我们需要使用路径，所以我们需要path这个模块。

vue.config.js

const path = require("path");  // 引入path

function resolve (dir) {

    //封装一个通用方法

    return  path.resolve(__dirname,  dir);

}

resolve方法返回的是一个路径地址，其中dir是我们要配置的目录路径，而__dirname表示的当前vue.config.js文件所在路径，我们vue.config.js文件就在项目根目录，那么这个路径就是根目录。

path.resolve()会将两个参数进行拼接成一个地址段。

自定义路径别名

vue.config.js

const  path = require("path");//引入path

function  resolve  (dir)  {

    //封装一个通用方法

    return  path.resolve(__dirname,dir);

}

module.exports  =  {  chainWebpack:  config  => {

    config.resolve.alias

    .set( '$cdf',   resolve('src/components'))

    }

}

我们可以看到有一个set方法，他有两个参数：

别名

完整路径

路径我们通过path模块封装一个通用方法，然后获取到了。

别名就自己定义了，不要和@冲突就行

注意

set方法他最后返回的自身，所以我们可以进行连缀书写，这样就能自定义多个别名

vue.config.js

const  path  =  require("path");//引入path

function  resolve  (dir)  {

        //封装一个通用方法

        return  path.resolve(__dirname,    dir);

}

module.exports  =  {

        chainWebpack:  config  =>  {

            config.resolve.alias

            .set('$cdf',  resolve('src/components'))

            .set('$acss',resolve('src/assets/css'))

    }

}

保存后重启项目，然后就可以了。

然后我们再将开头的两段引入代码调整下：

import  Header  from  "$cdf/Header";

import  Sidebar  from  "$cdf/Sidebar";

这样就很大程度上的减少路径的重复书写。