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里使用别名引入，会有红线，不知道怎么解决