vue cli3 配置相对路径别名

vue cli2
vue cli2版本配置别名在webpack.config.js中配置

resolve: {
extensions: ['.js', '.vue', '.json'],
	alias: {
		'@': resolve('src'),
		'assets':resolve('src/assets')
	}
},

vue cli3
vue cli3中找不到webpack.config.js 这时需要自己项目根目录创建一个vue.config.js文件来配置别名
代码如下：

const path = require('path');

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

配置好路径之后，使用时只需要用绝对路径即可
例如 import MainTabBar from ‘./components/tabbar/MainTabBar.vue’
配置后 import MainTabBar from ‘components/tabbar/MainTabBar.vue’

注意，如果引用的别名是html中的路径，则需要在别名之前加入符号~
例如 图片问题 直接绑定绝对路径图片显示不出来

<img src="~assets/img/tabbar/首页.svg" alt="" slot="item_icon">