使用 vite 工具構建項目時，為了 import 方便，一般會配置 alias 別名。例如：@ 代表 src 目錄 。配置完成后重啟服務出現報錯：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',
}
},
})
- 報錯日志：
> 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)
二、報錯原因
vite 在啟動本地服務后，會生成一些緩存文件，以提高性能提升速度。在配置 alias 后沒有清空緩存文件，所以出現報錯。
三、解決辦法
- 刪除 vite 的緩存目錄，默認緩存目錄在
node_modules/.vite中，刪除.vite文件夾即可。 - 還有另一種方法，使用
--force命令行選項，試了幾次發(fā)現并不好使。于是配置了一個npm的pre鉤子來處理，當執(zhí)行npm run dev命令的時候，會先執(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"
}
}
再次啟動服務，一切正常。
Vite 相關系列
- Vite+Vue3+Vant快速構建項目
- vue3 + vite實現異步組件和路由懶加載
- Vite啟動后提示Network: use
--hostto expose - vite.config配置alias時報錯：Error: ENOTEMPTY: directory not empty, rmdir
- Vue3+Vite+Vant報錯Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=xxxx'
歡迎訪問：天問博客
