vue文件引入路径 ./ ../ @/ @xxx

Vue文件中引用路径的介绍

1，路径 ./

./当前文件同级目录， ./css/等同于css/

2. 路径 ../

../当前文件上一级目录

3.  @

@ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录，避免易错的相对路径。 (注意@不要用在引入css文件路径，有的项目规范不支持)

例如：在路由index.js中，导入banana.vue

import banana from '@/components/banana'
import apple from '../components/apple'

vue在webpack.base.conf.js文件中有如下配置

import banana from '@/components/banana'
import apple from '../components/apple'

// 连接路径并返回
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  resolve: {
    // 在导入语句没带文件后缀时，webpack会自动按照顺序添加后缀名查找
    extensions: ['.js', '.vue', '.json'],
    // 配置别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      // 将项目根目录中，src的路径配置为别名@
      '@': resolve('src'),
　　　 '@config': resolve('config'),
    }
  }
}

参考：https://www.cnblogs.com/heson/p/10517754.html