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方法，他有两个参数：

1. 别名
2. 完整路径

路径我们通过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";

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