如何在vue项目中配置引用路径“@”

• 配置引用路径（以“@”引用为项目的src目录为例）可拆分为如下两步操作
  • 配置webpack打包时将“@”解析为项目的src目录
  • 配置vsCode在路径中输入“@”时的路径提示
• 本贴着重讲解“配置webpack打包时将‘@’解析为项目的src目录”的操作和溯源
  • 操作
    • 在项目根目录的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实现的。