vue-cli4的路径别名

路径别名的设置

在package.json同级目录下，创建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'))
    },
}

修改配置文件后需要重新编译

npm run serve

路径别名的使用

在html中的代码，在路径前加“~”：

      <template v-slot:icon>
        <img src="~assets/img/tabbar/home.svg" />
      </template>

在javascript中的代码，则不需要

    import TabBar from 'components/common/tabbar/TabBar'
    import TabBarItem from 'components/common/tabbar/TabBarItem'