使用 webpack 构建过 Vue 项目的同学应该知道 alias
的作用,我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中,我们引入文
件的时候通常会去计算被引入文件对于引入它的文件的相对路径,比如像这样:
import HelloWorld from '../../../../HelloWorld.vue'
一旦相对层次结构较深,我们就很难去定位所引入文件的具体位置,其实这并不是我们应该操心的地方,完全可以交给 webpack 来进行处理。在原生的 webpack
配置中我们可以定义 alias 来解决这一问题:
vue.config.js
vue2中配置
const webpack = require('webpack')
// 下卖弄diamante意思 是 让你免于在每一次设置alias时都写前面的 path.join
function resolve(dir) {
return path.join(__dirname, dir)
}
const path = require('path');
module.exports = {
lintOnSave: true,// eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件,
filenameHashing: true, //文件hash
configureWebpack: {
resolve: {
alias: {
'@': resolve('./src')
'@asssets': resolve('./src/assets')
}
}
} //vue-cli内部的webpack配置
}
上方我们在 webpack resolve(解析)对象下配置 alias 的值,将常用的一些路径赋值给了我们自定义的变量,这样我们便可以将第一个例子简化为:
import HelloWorld from '_com/HelloWorld.vue'
这样我们修改 webpack alias 来简化路径的优化就实现了。但是需要注意的是对于在样式及 html 模版中引用路径的简写时,前面需要加上 ~
符,否则路径解析会失败,如:
.img {
background: (~_img/home.png);
}
vue3中配置
而在 CLI 3.x 中我们无法直接操作 webpack 的配置文件,我们需要通过 chainWebpack 来进行间接修改,代码如下:
/* vue.config.js */
module.exports = {
...
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('_lib', resolve('src/common'))
.set('_com', resolve('src/components'))
.set('_img', resolve('src/images'))
.set('_ser', resolve('src/services'))
},
...
}