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'