VueCli4中设置路径别名

1.根目录下新建vue.config.js文件

const path = require('path')// 引入path模块
function resolve (dir) {
  return path.join(__dirname, dir)// path.join(__dirname)设置绝对路径
}
module.exports = {
  chainWebpack: (config) => {
    // 给路径起别名
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('@c', resolve('src/components'))
      .set('@v', resolve('src/views'))
      .set('@a', resolve('src/assets'))
    // .set('设置的别名',resolve('设置的路径'))
  }
}

2.使用

1).在html，css代码中 ：要在路径前添加波浪线’~’ 否则会报错

background: url("~@a/images/banner01.png") center no-repeat;

2).在js代码中：不用添加波浪线 直接使用

import Index from '@v/index/Index.vue'