在学习vue项目时,刚开始搭建就遇到了一个问题
我是通过 npm init vue@latest 创建vue3项目时,建立路由时报错
错误如下:[vite] Internal server error: EISDIR: illegal operation on a directory, read
通过上网查阅,提供的解决方法有好几种
- 出现这个问题可能是npm依赖包问题,可以清除node_module,重新npm install 或者yarn
- npm cache clean 清除一下缓存,也可以npm update 更新一下包,或者依赖包更新引起报错
- npm ,yarn 混搭使用引起错误,可以 yarn cache clean && yarn upgrade && yarn 重新安装
- 或者是vite.config.js的问题?重新去官网复制一份重新配置
- ..........
也有人说在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
遇到问题可以自己先尝试解决 无脑搜索也会浪费很多时间。。。