木灵鱼儿

木灵鱼儿

阅读：1771

最后更新：2020/10/09/ 17:44:22

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

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

文章分类 vue 项目实战
文章标签 vuecli3cli4自定义路径别名
木灵鱼儿

木灵鱼儿

发布了 696 篇文章获得点赞 0获得阅读 1771

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1771

相关文章

解决vant的tab组件swipeable功能与内部scroll冲突的问题解决vant的tab组件swipeable功能与内部scroll冲突的问题
moment utc时间转本地时间moment utc时间转本地时间
css选择器优先级计算规则css选择器优先级计算规则
对象的遍历对象的遍历
属性描述符属性描述符