vue-cli4路径别名问题

／／在总文件下，创建vue.config.js文件

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
    chainWebpack: config => {
        // 设置快捷路径， @ 表示 'src' ，components 表示 'src/components'
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('views', resolve('src/views'))
    },
}

在html下的代码是加～：

        <tab-bar-item path="/home"><!--变量path需要加'：'，字符串不需要加-->
            <img slot="item-icon" src="~assets/img/tabbar/like1.png" alt=" " />
            <img slot="item-icon-active" src="~assets/img/tabbar/like2.png" alt=" " />
            <div slot="item-text">首页</div>
        </tab-bar-item>
       

    ///共同目录下，
    import TabBar from 'components/common/tabbar/TabBar'
    import TabBarItem from 'components/common/tabbar/TabBarItem'