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文件中有如下配置

// 連接路徑並返回
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