如何在不重启Vue服务器的情况下处理import导入无后缀文件夹的报错?

作者站长头像
站长
· 阅读数 24

vue 启动本地服务器。import导入没有加后缀的文件夹被识别成.vue文件报错?

每次需要重启服务器。有其他办法解决吗?

回复
1个回答
avatar
test
2024-06-19

OP 你当前项目使用的是 VueCLI 还是 Vite?

我这边使用 VueCLI (5.x)创建了一个空白项目,在使用 import HelloWorld from './components/HelloWorld' 引入组件时,会自动引入 ./components/HelloWorld/index.vue 或者 ./components/HelloWorld.vue 文件。

所以如果是使用的 VueCLI 创建的项目,版本号是多少,是否有在 vue.config.js 当中对 resolve.extensionsresolve.mainFields 做了单独的配置?

还是说因为你开启了 vue/multi-word-component-names 这个Lint规则,所以因为检查没有通过导致的编译失败?


如果是用 Vite 创建的Vue项目,在使用 import HelloWorld from './components/HelloWorld' 引入组件时是会有错误提示 Failed to resolve import "./components/HelloWorld" from "xxx". Does the file exist? 的,因为 Vite 并不会自动添加 .vue 后缀。因为默认的后缀只有 ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'],具体可以查看 👉 #resolve.extensions - 共享选项 | Vite 官方中文文档

如果你想要自动引入可以手动修改 resolve.extensions 这个配置项添加 .vue 后缀。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容