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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/31019.html
標籤：其他