vue-cli3 配置路径别名（vue配置根路径）

最近用Vue Cli3脚手架搭建了Vue项目，发现没有build目录了，里面的webpack相关的也没了，看了官方文档后，查了资料后，发现都在vue.config.js里来配置了

1.先在项目根目录下创建vue.config.js文件

2.然后在文件里输入下面代码

const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    lintOnSave: true,
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('base', resolve('src/base'))
            .set('views',resolve('src/views'))
            .set('common', resolve('src/common'))
            .set('components', resolve('src/components'))
    }
}

3.组件中使用

import appBar from 'base/bar'
import appGrid from 'base/grid'
import appHeader from 'base/header'
import appBanner from 'components/banner'
import appListView from 'components/list'

4.注意事项

vue.config.js文件创建完后，不需要什么操作，@vue/cli-service会自己识别，如果出现报错等等，可以先尝试重启下IDE或者启动下项目

vue.config.js在vue项目创建后，默认是没有的，是一个可选的文件