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">