我們經常需要在Vue項目中引入當前目錄下的模塊。這個場景可以用來引入組件、配置文件、工具函數、圖片資源等。今天，我們來探討一下在Vue中如何導入當前目錄下的模塊。

在Vue中，我們可以使用module import語法來引入當前目錄下的模塊。這個語法的寫法和普通的import語法類似，但是需要加上 "./" 前綴，表示要從當前目錄下查找。

import MyComponent from './MyComponent.vue'
import config from './config.js'
import { formatDate } from './utils.js'

實際上，這種導入方式在Node.js中也是可以使用的。Node.js中的require函數也可以用相對路徑引入同級目錄下的模塊。

const MyComponent = require('./MyComponent.vue')
const config = require('./config.js')
const { formatDate } = require('./utils.js')

但需要特別注意的是，在Vue項目中，我們通常使用webpack或者parcel等打包工具進行打包。這些打包工具會將我們的代碼進行打包壓縮，可能會導致引入的文件路徑不正確。

為了避免這種情況發(fā)生，我們可以使用webpack的alias配置來映射當前目錄。具體的做法是在 webpack.config.js 文件中添加下面這段代碼：

module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}

這里把 '@' 符號所代表的路徑，指向了 src 目錄下。這樣，我們在導入模塊時，可以使用下面這種寫法：

import MyComponent from '@/components/MyComponent.vue'
import config from '@/config.js'
import { formatDate } from '@/utils.js'

不僅使得我們的路徑更加簡潔易讀，還能避免因為打包工具的目錄結構改變導致路徑出錯的問題。

總之，Vue的module import語法是非常方便易用的。配合webpack或者parcel的alias配置，能夠使我們的組件開發(fā)更加高效、安全。