脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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检测对象和数组的变化分析

    vue检测对象和数组的变化分析

    这篇文章给大家分享了vue检测对象和数组的变化的相关知识点与实例代码，有兴趣的朋友参考下。
    2018-06-06
  • Vite版本更新检查实现页面自动刷新的解决思路

    Vite版本更新检查实现页面自动刷新的解决思路

    这篇文章主要给大家介绍了关于Vite版本更新检查实现页面自动刷新的解决思路,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • vue实现虚拟列表组件解决长列表性能问题

    vue实现虚拟列表组件解决长列表性能问题

    这篇文章主要介绍了在vue中实现虚拟列表组件，解决长列表性能问题,本文给大家分享实现思路及实例代码，需要的朋友可以参考下
    2022-07-07
  • 浅谈nuxtjs校验登录中间件和混入(mixin)

    浅谈nuxtjs校验登录中间件和混入(mixin)

    这篇文章主要介绍了浅谈nuxtjs校验登录中间件和混入(mixin)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解Vue.js动态绑定class

    详解Vue.js动态绑定class

    Vue.js的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过vue.js动态绑定class就变得非常简单。一起来看下吧
    2016-12-12
  • 一文教会你如何运行vue项目

    一文教会你如何运行vue项目

    最近因为公司项目问题,开始学习vue,这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,文中还介绍了如何运行别人的项目,需要的朋友可以参考下
    2022-06-06
  • 使用mockjs如何生成随机数据

    使用mockjs如何生成随机数据

    Mockjs是一个用于生成随机数据和拦截Ajax请求的库,可以与Vue和Axios结合使用,提高前端开发效率,通过在项目中引入Mock.js文件,可以模拟后端API,拦截Ajax请求并返回自定义响应,这种方法适用于在后端尚未开发完成时的前端开发测试
    2024-10-10
  • vue父组件异步获取数据传给子组件的方法

    vue父组件异步获取数据传给子组件的方法

    这篇文章主要介绍了vue父组件异步获取数据传给子组件,需要的朋友可以参考下
    2018-07-07
  • vue最强table vxe-table 虚拟滚动列表 前端导出问题分析

    vue最强table vxe-table 虚拟滚动列表 前端导出问题分析

    最近遇到个问题,后台一次性返回2万条列表数据并且需求要求所有数据必须全部展示,不能做假分页,怎么操作呢,下面通过本文介绍下vue最强table vxe-table 虚拟滚动列表 前端导出问题,感兴趣的朋友一起看看吧
    2023-10-10
  • 解决vue A对象赋值给B对象,修改B属性会影响到A的问题

    解决vue A对象赋值给B对象,修改B属性会影响到A的问题

    今天小编就为大家分享一篇解决vue A对象赋值给B对象,修改B属性会影响到A的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论