原文地址Vue中import from的來源：省略字尾與載入資料夾_超頻化石魚的部落格-CSDN部落格，原文地址排版格式可能更好，建議看原文，本文只是為了轉載記錄

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元件。
————————————————
版權宣告：本文為CSDN博主「超頻化石魚」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/fyyyr/article/details/83657828