一般做法
在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'
