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: 50%; ?????transform: translateY(-50%); ???} ?}</style>有个小问题，使用webstrom开发的时候，style里使用别名引入，会有红线，不知道怎么解决
Vue项目中使用webpack配置了别名，引入的时候报错
原文地址：https://www.cnblogs.com/zhaobao1830/p/10558045.html