首先声明这种配置方法只适用于vue-cli4
在项目中,我们经常会有通过../来引入不同目录的资源文件
但是如果层级关系混乱的话,那很容易造成引入错误的问题,为了解决这个问题,我们在webpack中使用路径的别名
首先在根目录下创建vue.config.js文件
然后在文件中写入
// 用来配置文件的别名,方便路径的寻找
//引入path模块
const path = require('path');
function resolve (dir) {
//设置绝对路径
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('./src'))
.set('@components', resolve('./src/components'))
.set('@views', resolve('./src/views'))
.set('@assets', resolve('./src/assets'))
}
}
然后就可以使用了
更改完以后记得重启项目