chainWebpack(config) {
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
},
这是vue.config.js里的配置
使用的时候，要在别名前面加上~，这样就会告知加载器这是一个模块，而不是绝对路径
记住，在script部分或者js里引入的时候，不需要加 ~，直接用别名就行
只有在template和style里引入的时候需要加
例子：
<template>
<div class="login">
<div class="team-name">
<img src="~assets/img/login/team-name.png">
</div>
<div class="form-box"></div>
</div>
</template> <script>
import 'assets/login/login.js' export default {
name: 'Login'
}
</script> <style scoped lang="scss" type="text/scss">
.login{
width: 100px;
height: 100px;
background-size: auto;
background: #1b2c5f url(~assets/img/login/login-ba.png) no-repeat center; .team-name{
position: fixed;
width: 50px;
left: 40px;
top: %;
transform: translateY(-%);
}
}
</style>
有个小问题，使用webstrom开发的时候，style里使用别名引入，会有红线，不知道怎么解决