Vue中import '@...'的意思

轉載：

https://blog.csdn.net/xiazeqiang2018/article/details/81325996

寫項目的時候看到很多導入都是@開頭，這是webpack的路徑別名，相關代碼定義在配置文件webpack.base.config里

 

 PS:里面的路徑是針對當前文件的路徑地址，而非引用文件的路徑地址。

resolve: {
    // 自動補全的擴展名
    extensions: ['.js', '.vue', '.json'],
    // 默認路徑代理
    // 例如 import Vue from 'vue'，會自動到 'vue/dist/vue.common.js'中尋找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

其中resolve（）函數是文件里面自定義的函數：

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

也可以自定義路徑：

alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'，
        '@components':path.join(__dirname, '..', 'src/components')//組件路徑
    }

@ 等價於 /src 這個目錄，避免寫麻煩又易錯的相對路徑