脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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数据驱动表单渲染,轻松搞定form表单

    Vue数据驱动表单渲染,轻松搞定form表单

    这篇文章主要介绍了Vue数据驱动表单渲染,轻松搞定form表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 解决vue组件中click事件失效的问题

    解决vue组件中click事件失效的问题

    今天小编就为大家分享一篇解决vue组件中click事件失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue+element DatePicker实现日期选择器封装

    vue+element DatePicker实现日期选择器封装

    Vue Element DatePicker是一款基于Vue.js的日期选择控件，它提供了丰富的日期选择功能，支持日期范围选择、日期格式化、自定义日期格式、快捷选择等功能，极大地提高了用户的体验，是开发者必备的日期选择控件。
    2023-02-02
  • Element Plus实现Affix 固钉

    Element Plus实现Affix 固钉

    本文主要介绍了Element Plus实现Affix 固钉，Affix组件用于将页面元素固定在特定可视区域，文中通过示例代码介绍的非常详细，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue3计算属性computed和监听属性watch区别解析

    Vue3计算属性computed和监听属性watch区别解析

    计算属性适用于对已有的数据进行计算,派生新的数据,并在模板中使用；而监听属性适用于监听数据的变化,并执行一些特定的操作,根据具体的需求和场景,选择适合的机制这篇文章主要介绍了Vue3计算属性computed和监听属性watch,需要的朋友可以参考下
    2024-02-02
  • Vue中正确使用jQuery的方法

    Vue中正确使用jQuery的方法

    这篇文章主要为大家详细介绍了Vue中正确使用jQuery的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue拖拽组件vuedraggable使用说明详解

    vue拖拽组件vuedraggable使用说明详解

    这篇文章主要为大家详细介绍了vue拖拽组件vuedraggable的使用说明，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue2 设置router-view默认路径的实例

    vue2 设置router-view默认路径的实例

    今天小编就为大家分享一篇vue2 设置router-view默认路径的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue+element+electron仿微信实现代码

    vue+element+electron仿微信实现代码

    这篇文章主要介绍了vue+element+electron仿微信实现,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • vue实现百度搜索功能

    vue实现百度搜索功能

    这篇文章主要为大家详细介绍了vue实现百度搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论