vue-cli4下webpack配置路径别名

首先声明这种配置方法只适用于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'))
  }
}

然后就可以使用了

 

 更改完以后记得重启项目