我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
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";
这样就很大程度上的减少路径的重复书写。
0
评论(0)