vite.config配置alias Error: ENOTEMPTY: directory not empty, rmdir
一、前言
使用 vite 工具構(gòu)建項(xiàng)目時(shí)，為了 import 方便，一般會(huì)配置 alias 別名。例如：@ 代表 src 目錄 。配置完成后重啟服務(wù)出現(xiàn)報(bào)錯(cuò)：Error: ENOTEMPTY: directory not empty, rmdir 'D:/project/vite-react/node_modules/.vite/deps'。
Vite
- alias 配置：
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': '/src',
'@css': '/src/styles',
}
},
})- 報(bào)錯(cuò)日志：
> vite-react@0.0.0 dev D:\project\vite-react
> vite
error when starting dev server:
Error: ENOTEMPTY: directory not empty, rmdir 'D:/project/vite-react/node_modules/.vite/deps'
at rmdirSync (fs.js:735:3)
at removeDirSync (D:\project\vite-react\node_modules\_vite@2.9.9@vite\dist\node\chunks\dep-59dc6e00.js:2566:9)
at loadCachedDepOptimizationMetadata (D:\project\vite-react\node_modules\_vite@2.9.9@vite\dist\node\chunks\dep-
59dc6e00.js:39428:5)二、報(bào)錯(cuò)原因
vite 在啟動(dòng)本地服務(wù)后，會(huì)生成一些緩存文件，以提高性能提升速度。在配置 alias 后沒(méi)有清空緩存文件，所以出現(xiàn)報(bào)錯(cuò)。
三、解決辦法
- 刪除 vite 的緩存目錄，默認(rèn)緩存目錄在
node_modules/.vite中，刪除.vite文件夾即可。 - 還有另一種方法，使用
--force命令行選項(xiàng)，試了幾次發(fā)現(xiàn)并不好使。于是配置了一個(gè)npm的pre鉤子來(lái)處理，當(dāng)執(zhí)行npm run dev命令的時(shí)候，會(huì)先執(zhí)行rd /s /q node_modules\\.vite命令刪除緩存目錄node_modules/.vite。
windows 系統(tǒng)：
{
"scripts": {
"predev": "rd /s /q node_modules\\.vite",
"dev": "vite --host"
}
}macOS 、 Linux 系統(tǒng)：
{
"scripts": {
"predev": "rm -rf ./node_modules/.vite",
"dev": "vite --host"
}
}
再次啟動(dòng)服務(wù)，一切正常。
以上就是vite.config配置alias時(shí)報(bào)錯(cuò)Error: ENOTEMPTY: directory not empty, rmdir的詳細(xì)內(nèi)容，更多關(guān)于vite.config配置alias報(bào)錯(cuò)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue開(kāi)發(fā)實(shí)現(xiàn)評(píng)論列表
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)實(shí)現(xiàn)評(píng)論列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue使用Highcharts實(shí)現(xiàn)不同高度的3D環(huán)形圖
這篇文章主要為大家詳細(xì)介紹了vue使用Highcharts實(shí)現(xiàn)不同高度的3D環(huán)形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
在?Vue?框架中,哪些地方容易被攻擊呢？寫(xiě)代碼的時(shí)候要注意什么呢？這篇文章中小編為大家總結(jié)了一些常見(jiàn)的容易受到攻擊的地方,希望對(duì)大家有所幫助2024-02-02
使用Vue實(shí)現(xiàn)簡(jiǎn)單的信號(hào)和電池電量組件
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)簡(jiǎn)單的信號(hào)和電池電量組件效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
vue中有一個(gè)很神奇的東西叫v-model，它可以完成我們的需求。，本文重點(diǎn)給大家介紹vue中使用v-model完成組件間的通信,需要的朋友可以參考下2019-08-08
Vue-Cli中自定義過(guò)濾器的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue-Cli中自定義過(guò)濾器的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了Vue狀態(tài)管理。下面文章主要圍繞著使用Pinia代替Vuex的相關(guān)資料展開(kāi)具體內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-11-11
使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法
這篇文章主要介紹了使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue如何監(jiān)測(cè)數(shù)組類(lèi)型數(shù)據(jù)發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測(cè)數(shù)組類(lèi)型數(shù)據(jù)發(fā)生改變的,本文通過(guò)實(shí)例代碼圖文詳解給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
Vue項(xiàng)目獲取url中的參數(shù)(親測(cè)可用)
這篇文章主要介紹了Vue項(xiàng)目獲取url中的參數(shù)，本文通過(guò)兩種情況分析給大家詳細(xì)介紹，感興趣的朋友一起看看吧2022-08-08