vite.config配置alias Error: ENOTEMPTY: directory not empty, rmdir

 更新时间:2023年06月14日 11:33:50   作者:天問  
这篇文章主要为大家介绍了vite.config配置alias时报错:Error: ENOTEMPTY: directory not empty, rmdir解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一、前言

使用 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 命令行选项,试了几次发现并不好使。于是配置了一个 npmpre 钩子来处理,当执行 npm run dev 命令的时候,会先执行 rd /s /q node_modules\\.vite 命令删除缓存目录 node_modules/.vite

windows 系统:

{
  "scripts": {
    "predev": "rd /s /q node_modules\\.vite",
    "dev": "vite --host"
  }
}

macOSLinux 系统:

{
  "scripts": {
    "predev": "rm -rf ./node_modules/.vite",
    "dev": "vite --host"
  }
}

再次启动服务,一切正常。

以上就是vite.config配置alias时报错Error: ENOTEMPTY: directory not empty, rmdir的详细内容,更多关于vite.config配置alias报错的资料请关注脚本之家其它相关文章!

相关文章

  • vue开发实现评论列表

    vue开发实现评论列表

    这篇文章主要为大家详细介绍了vue开发实现评论列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue使用Highcharts实现不同高度的3D环形图

    vue使用Highcharts实现不同高度的3D环形图

    这篇文章主要为大家详细介绍了vue使用Highcharts实现不同高度的3D环形图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 14个Vue中易被攻击的代码位置小结

    14个Vue中易被攻击的代码位置小结

    在 Vue 框架中,哪些地方容易被攻击呢?写代码的时候要注意什么呢?这篇文章中小编为大家总结了一些常见的容易受到攻击的地方,希望对大家有所帮助
    2024-02-02
  • 使用Vue实现简单的信号和电池电量组件

    使用Vue实现简单的信号和电池电量组件

    这篇文章主要为大家详细介绍了如何使用Vue实现简单的信号和电池电量组件效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-04-04
  • vue中使用v-model完成组件间的通信

    vue中使用v-model完成组件间的通信

    vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。,本文重点给大家介绍vue中使用v-model完成组件间的通信,需要的朋友可以参考下
    2019-08-08
  • Vue-Cli中自定义过滤器的实现代码

    Vue-Cli中自定义过滤器的实现代码

    本篇文章主要介绍了Vue-Cli中自定义过滤器的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue状态管理之使用Pinia代替Vuex

    Vue状态管理之使用Pinia代替Vuex

    这篇文章主要介绍了Vue状态管理。下面文章主要围绕着使用Pinia代替Vuex的相关资料展开具体内容,需要的朋友可以参考一下,希望对你有所帮助
    2021-11-11
  • 使vue实现jQuery调用的两种方法

    使vue实现jQuery调用的两种方法

    这篇文章主要介绍了使vue实现jQuery调用的两种方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue如何监测数组类型数据发生改变的(推荐)

    Vue如何监测数组类型数据发生改变的(推荐)

    这篇文章主要介绍了Vue如何监测数组类型数据发生改变的,本文通过实例代码图文详解给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • Vue项目获取url中的参数(亲测可用)

    Vue项目获取url中的参数(亲测可用)

    这篇文章主要介绍了Vue项目获取url中的参数,本文通过两种情况分析给大家详细介绍,感兴趣的朋友一起看看吧
    2022-08-08

最新评论