一般做法

  在VUE项目中，如果文件过多且存在较多引用关系，常规情况./或../的路径法虽然能达成目的，但容易犯错。(当然也很low)

优雅做法

  1. 在VUE的webpack.base.conf.js中，已默认为项目配置了@代号，该代号将指向到项目的src文件夹。

    // 为显示方便，module.exports的部分属性未显示
    module.exports = {
          resolve: {
          extensions: ['.js', '.vue', '.json'],
          alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),  // 这句是重点
          }
        }
    }

  2. @强制匹配SRC路径，形成统一的入口并逐步下沉路径后，可避免路径失误，在任意文件内都能得到统一的入口。
  3. 使用举例：引用  项目名称/src/components/common/Head.vue  的常规方式可以改为以下写法：

        import MyHead from '@/components/common/Head'

优雅做法-升级版

  1. 在VUE默认为项目配置了@代号，那么也可以用类似的标识指定统一的入口

    // 为显示方便，module.exports的部分属性未显示
    module.exports = {
          resolve: {
          extensions: ['.js', '.vue', '.json'],
          alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'), 
          'api': resolve('src/api'),  // 原目录文件夹，直接指定，毕竟能少一个文件夹地址看起来也是好的
          'components': resolve('src/components'), // 同上
          'pages': resolve('src/pages') // 自定义文件夹，也可以在这里配置路径
          }
        }
    }

  2. 与上面的例子一样：引用  项目名称/src/components/common/Head.vue  的写法可以更进一步：

        import MyHead from 'components/common/Head'