Vue import from省略後綴/加載文件夾的方法/實例詳解

Posted on by

簡介

本文介紹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的來源
}

實例

以vue-element-admin的代碼為例。

1. 路由配置中導入layout文件夾

此時，按照規則，會去加載package.json，沒有；則找index.js，沒有；再找index.vue，找到瞭。

2.layout/index.vue引入目錄

引入的是components/index.js

3.components/index.js引入各個組件

其他網址

Vue中import from的來源：省略後綴與加載文件夾

到此這篇關於Vue import from省略後綴/加載文件夾的方法/實例詳解的文章就介紹到這瞭,更多相關Vue–import from省略後綴內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：