[开发工具]如何在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博客