• 配置webpack打包时将“@”解析为项目的src目录
• 配置vsCode在路径中输入“@”时的路径提示

• 操作
  • 在项目根目录的vue.config.js文件中做如下配置

    const path = require('path')
    module.exports = {
      configureWebpack: {
        resolve: {
          alias: {
            '@': path.resolve(__dirname, 'src')
          }
        }
      }
    }
    

  • 说明：如果没有这段配置但引用路径“@”依然生效，则是环境内置了这段配置。

• 溯源

  • 来到Vue CLI官网（webpack 相关 | Vue CLI），我们可以找到如何通过“简单的方式”配置webpack的说明。

  •  继而来到webpack官网（解析(Resolve) | webpack 中文文档），在resolve配置项中alias关键字的配置中，找到了关于“创建import或require的别名”的配置的说明。 

  •  综合以上两处文档，可以溯源“配置webpack打包时将‘@’解析为项目的src目录”的语法出处。

关于如何“配置vsCode在路径中输入‘@’时的路径提示”

• 可以参考这篇帖子——vsCode配置import@路径提示_SunnyRun-CSDN博客

特别提醒：在样式中使用引用路径时，前面需要加“~”

• 示例代码

  <style lang="less" scoped>
  @import "~@/styles/variables.less";
  .test {
      background: url('~@/assets/images/logo.png')
  }
  </style>

• 溯源

  • 在less官网（Less 快速入门 | Less.js 中文文档 - Less 中文网），可以找到关于引入less文件的语法出处，但并未发现有关使用引用路径前面需要加“~”的说明。

  • 继而来到Vue CLI官网（CSS 相关 | Vue CLI），找到了使用引用路径时需要在路径前加上“~”的相关说明。

  • 但其实，这个规则从根本上了来讲，由webpack官网（less-loader | webpack 中文文档）的less-loader部分文档决定，因为Vue CLI的打包功能是由webpack实现的。