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";

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

0
  • 本文分类:vue 项目实战
  • 本文标签:vuecli3cli4自定义路径别名
  • 流行热度:已超过 58 人围观了本文
  • 最后更新:2020年10月9日 - 17时44分22秒
  • 发布日期:2020年10月9日 - 17时44分22秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码