Vue中import from的來源--省略尾碼與載入文件夾

Vue使用import ... from ...來導入組件，庫，變數等。而from後的來源可以是js，vue，json。這個是在webpack.base.conf.js中設置的：

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  }
...
}

這裡的extensions指定了from後可導入的文件類型。

而上面定義的這3類可導入文件，js和vue是可以省略尾碼的：

import test from './test.vue'

等同於：

import test from './test'

同理：

import test from './test.js'

等同於：

import test from './test'

json不可以省略尾碼：

import test from './test.json'

省略為：

import test from './test'

則編譯出錯。

那麼，若test.vue，test.js同時存在於同一個文件夾下，則import的導入優先順序是：

js>vue

from後的來源除了文件，還可以是文件夾：

import test from './components'

該情況下的邏輯是：

if(package.json存在 && package.main欄位存在 && package.main指定的js存在) {
    取package.main指定的js作為from的來源，即使該js可能格式或內容錯誤
} else if(index.js存在){
    取index.js作為from的來源
} else {
    取index.vue作為from的來源
}

因此若from的來源是文件夾，那麼在package.json存在且設置正確的情況下，會預設載入package.json；若不滿足，則載入index.js；若不滿足，則載入index.vue。

註意載入文件夾的形式，與上面省略尾碼的形式是完全相同的。所以一個省略尾碼的from來源，有可能是.vue，.js，或者文件夾。

例：

查看Vue-Element-Admin的源碼，其中有個Layout.vue：

裡面調用import導入了3個組件：

import { Navbar, Sidebar, AppMain } from './components'

這裡，from的路徑'./components'就是個文件夾。

於是，按照前面的規則，首先查看文件夾下是否有package.json：

並沒有package.json。

package.json不存在，那麼查找index.js。index.js是存在的，於是載入。

打開index.js：

export { default as Navbar } from './Navbar'

export { default as Sidebar } from './Sidebar'

export { default as AppMain } from './AppMain'

可以看到3個export，都沒有尾碼，所以其類型vue，js和文件夾都是有可能的。

同一級目錄下，存在AppMain.vue和Navbar.vue，沒有同名js，所以可以判斷出這兩個都是載入的vue文件，即：

export { default as Navbar } from './Navbar.vue'

export { default as AppMain } from './AppMain.vue'

而Sidebar只有一個文件夾，所以是載入的文件夾。打開Sidebar文件夾：

優先找package.json。不存在。

然後找index.js，不存在。

最後找index.vue，存在。

於是：

export { default as Sidebar } from './Sidebar'

相當於：

export { default as Sidebar } from './Sidebar/index.vue'

這樣，Layout.vue就通過載入一個文件夾，獲得了3個vue組件。

站在巨人的肩膀上摘蘋果:

原文：https://blog.csdn.net/fyyyr/article/details/83657828