在 Vue 3 项目中遇到 “has no default export” 的提示，通常不是因为你的代码写错了，而是由于 VSCode 的 Vue 扩展 Vetur 对 Vue 3 和 <script setup> 语法支持不完善导致的。

别担心，这里有几个解决方法，你可以根据情况尝试。

推荐的解决方案 🥇

最彻底和推荐的方法是更换 VSCode 插件。

  1. 禁用或卸载 Vetur：在 VSCode 的扩展面板中，找到 Vetur 并将其禁用或直接卸载。
  2. 安装 Volar：在 VSCode 扩展商店中搜索并安装 Vue Language Features (Volar)。这是 Vue 官方团队推荐的新一代 Vue 工具插件，完美支持 Vue 3、TypeScript 和 <script setup> 语法。
  3. 重启 VSCode：完成上述操作后，重启 VSCode，错误提示应该就会消失。

注：如果你在使用 TypeScript，建议同时安装 TypeScript Vue Plugin 插件，它可以更好地支持在 .ts 文件中导入 .vue 组件。

其他备选方案

如果上述方法不适用，你可以考虑以下选择：

  • 临时配置 Vetur：如果暂时不想卸载 Vetur，可以在 VSCode 的设置中（settings.json）添加以下配置来关闭 Vetur 的脚本验证：

    1
    "vetur.validation.script": false

    注意：这只是消除了错误提示，并未从根本上解决问题。

  • 检查模块导出类型（针对JS/TS库）：如果你在导入一个非 Vue 组件的 JavaScript/TypeScript 库时遇到类似错误（例如 "default" is not exported by ...），这表示该库可能没有使用 export default 语法。这时，你需要根据该库提供的导出方式，使用命名导入而非默认导入。

    默认导入（可能导致错误）：

    1
    import myLib from 'my-library';

    命名导入（可能为正确方式）：

    1
    import { myFunction } from 'my-library';

    具体应使用哪种方式，请查阅该库的官方文档。

总结

大多数情况下，”has no default export” 的提示通过 用 Volar 替换 Vetur 即可解决。这个方案也是 Vue 作者尤雨溪所推荐的。

希望这些方法能帮助你解决问题！如果尝试后仍有疑问，欢迎随时再问我。