脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vite.config配置alias Error

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

windows 系统：

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

macOS 、 Linux 系统：

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

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

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

您可能感兴趣的文章:

相关文章

  • vue项目中js文件使用vue的this实例说明

    vue项目中js文件使用vue的this实例说明

    这篇文章主要介绍了vue项目中js文件使用vue的this实例说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • Vue或者React项目配置@路径别名及智能提示方案

    Vue或者React项目配置@路径别名及智能提示方案

    这篇文章主要介绍了Vue或者React项目配置@路径别名及智能提示方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • el-form 多层级表单的实现示例

    el-form 多层级表单的实现示例

    这篇文章主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 解决vue-router路由拦截造成死循环问题

    解决vue-router路由拦截造成死循环问题

    这篇文章主要介绍了解决vue-router路由拦截造成死循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue-router中关于children的使用方法

    vue-router中关于children的使用方法

    这篇文章主要介绍了vue-router中关于children的使用方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue中Form 表单的 resetFields() 失效原因及问题解决

    vue中Form 表单的 resetFields() 失效原因及问题解决

    在Vue项目中,使用formRef.value.resetFields()方法重置表单时可能遇到不起作用的问题,下面就来介绍一下如何解决,感兴趣的可以了解一下
    2024-09-09
  • Vue2.0权限树组件实现代码

    Vue2.0权限树组件实现代码

    本文通过实例代码给大家介绍了Vue2.0权限树组件实现代码，需要的的朋友参考下吧
    2017-08-08
  • Vue根据条件添加click事件的方式

    Vue根据条件添加click事件的方式

    今天小编就为大家分享一篇Vue根据条件添加click事件的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 谈谈因Vue.js引发关于getter和setter的思考

    谈谈因Vue.js引发关于getter和setter的思考

    最近因为公司的新项目决定使用Vue.js来做，但在使用的过程中发现了一个有趣的事情，因为发现的这个事情展开了一些对于getter和setter的思考，具体是什么下面通过这篇文章来一起看看吧，有需要的朋友们可以参考学习。
    2016-12-12
  • Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决

    Vue启动失败报错:Module not found: Error: Can‘t resolve &apos

    这篇文章主要给大家介绍了关于Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-03-03

最新评论