Vue项目中使用webpack配置了别名，引入的时候报错

Posted 2021-02-13 zhaobao1830

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