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

更新時間：2022年08月30日 10:50:11 作者：IT利刃出鞘

本文介紹Vue在import時省略后綴以及import文件夾的方法，結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

簡介

本文介紹Vue在import時省略后綴以及import文件夾的方法。

省略后綴

說明

可以配置省略后綴，比如：test.js，只用test即可。

官網(wǎng)網(wǎng)址

解析(Resolve) | webpack 中文文檔

詳解

配置文件：webpack.base.conf.js（也可以在vue.config.js中配置相應的位置）

（下邊這個是默認配置，項目中不配置也是這樣的規(guī)則）。

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優(yōu)先于.vue，則import的導入優(yōu)先級是：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可能格式或內(nèi)容錯誤）
} else if(index.js存在){
    取index.js作為from的來源
} else {
    取index.vue作為from的來源
}