Vue import from省略字尾/載入資料夾的方法/範例詳解

2022-08-30 14:01:22

簡介

本文介紹Vue在import時省略字尾以及import資料夾的方法。

省略字尾

說明

可以設定省略字尾，比如：test.js，只用test即可。

官網網址

解析(Resolve) | webpack 中文檔案

詳解

組態檔：webpack.base.conf.js（也可以在vue.config.js中設定相應的位置）

（下邊這個是預設設定，專案中不設定也是這樣的規則）。

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
  }
...
}

這裡的extensions指定了from後可匯入的檔案型別。上面定義的這3類可匯入檔案，js和vue是可以省略字尾的。

例如：

對於test.js，可以用如下兩種任一方式匯入：

import test from './test'
import test from './test.js'

對於test.vue，可以用如下兩種任一方式匯入：

import test from './test'
import test from './test.vue'

json不可以省略字尾，只能如下匯入（如果去掉字尾則編譯出錯）：

import test from './test.json'

檔名相同的處理流程

若test.vue，test.js同時存在於同一個資料夾下，會按照設定的順序進行匯入。比如：按上邊的設定，.js優先於.vue，則import的匯入優先順序是：js > vue。

載入資料夾

簡介

說明

可以import資料夾。例如：import test from './components'。

若from資料夾，則對於該資料夾下的檔案：

如果package.json存在且設定正確的情況下，會載入package.json；
若不滿足，則載入index.js；
若不滿足，則載入index.vue。

詳解

虛擬碼如下：

在該目錄下：

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