快捷導(dǎo)航

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

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

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

簡介

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

省略后綴

說明

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

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

解析(Resolve) | webpack 中文文檔

詳解

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

（下邊這個(gè)是默認(rèn)配置，項(xiàng)目中不配置也是這樣的規(guī)則）。

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

這里的extensions指定了from后可導(dǎo)入的文件類型。上面定義的這3類可導(dǎo)入文件，js和vue是可以省略后綴的。

例如：

對(duì)于test.js，可以用如下兩種任一方式導(dǎo)入：

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

對(duì)于test.vue，可以用如下兩種任一方式導(dǎo)入：

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

json不可以省略后綴，只能如下導(dǎo)入（如果去掉后綴則編譯出錯(cuò)）：

import test from './test.json'

文件名相同的處理流程

若test.vue，test.js同時(shí)存在于同一個(gè)文件夾下，會(huì)按照配置的順序進(jìn)行導(dǎo)入。比如：按上邊的配置，.js優(yōu)先于.vue，則import的導(dǎo)入優(yōu)先級(jí)是：js > vue。

加載文件夾

簡介

說明

可以import文件夾。例如：import test from './components'。

若from文件夾，則對(duì)于該文件夾下的文件：

如果package.json存在且設(shè)置正確的情況下，會(huì)加載package.json；
若不滿足，則加載index.js；
若不滿足，則加載index.vue。

詳解

偽代碼如下：

在該目錄下：

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