vue+vite项目在开发时报错：Internal server error: EISDIR: illegal operation on a directory, read

在学习vue项目时，刚开始搭建就遇到了一个问题

我是通过 npm init vue@latest 创建vue3项目时，建立路由时报错

错误如下：[vite] Internal server error: EISDIR: illegal operation on a directory, read

通过上网查阅，提供的解决方法有好几种

1. 出现这个问题可能是npm依赖包问题，可以清除node_module,重新npm install 或者yarn
2. npm cache clean 清除一下缓存，也可以npm update 更新一下包，或者依赖包更新引起报错
3. npm ，yarn 混搭使用引起错误，可以 yarn cache clean && yarn upgrade && yarn 重新安装
4. 或者是vite.config.js的问题？重新去官网复制一份重新配置
5. ..........

也有人说在vite.config.js中添加配置即可:

  server:{
    hmr:{
      overlay:false
    }
  },

经查阅，hmr: { overlay: false }, 的作用是禁用或配置 HMR 连接

设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层，但并没有真正解决报错问题。

通过尝试这几种方法，我的问题均未能解决

 

于是尝试自己翻译，报错中文意思提示：

        服务器内部错误:EISDIR:对目录的非法操作，读取

 于是怀疑是自己文件引入的问题，好在代码报错前写的不多，逐步排查

在路由文件index.js下面找到问题：

问题原因：

在引入Layout公共页面的时候，路径未补充完整

我以为Layout文件夹下是index就会自动引入，经查，官方规定，在vite中导入.vue文件时后缀不能省略，不知是不是这个原因

可以参考尤雨溪的回答：https://github.com/vitejs/vite/issues/178

 遇到问题可以自己先尝试解决 无脑搜索也会浪费很多时间。。。