Vant CLI 6.0 组件开发中 script setup 导出问题解析

在使用 Vant CLI 6.0 进行组件开发时，开发者遇到了一个关于 script setup 语法与组件导出的兼容性问题。本文将深入分析该问题的成因，并提供解决方案。

问题现象

当开发者使用 script setup 语法编写组件时，通过 Vant CLI 的 build 命令打包后，生成的 es/index.js 文件中缺少了组件的引入与导出语句。具体表现为：

1. 使用传统 export default 方式时，打包输出正常
2. 改用 script setup 语法后，打包产物中缺失组件导出
3. 控制台报错提示组件未被正确导出

问题根源

经过分析，这个问题源于 Vant CLI 内部的组件导出逻辑。在打包过程中，CLI 会检查组件是否使用了默认导出（export default）来决定是否将其包含在最终的导出列表中。而 script setup 语法是一种编译时语法糖，它不会生成传统的 export default 语句，导致 CLI 无法正确识别和导出组件。

解决方案

针对这个问题，有两种可行的解决方案：

方案一：使用 defineOptions 宏

在 script setup 中显式定义组件名称：

<script setup>
defineOptions({
  name: 'DemoButton'
})
</script>

这种方法利用了 Vue 3.3+ 提供的 defineOptions 宏，明确指定组件名称，使打包工具能够正确识别组件。

方案二：修改 Vant CLI 导出逻辑

在 Vant CLI 源码中，修改组件导出的判断条件，使其能够识别 script setup 语法。具体修改包括：

1. 检查组件是否使用了 defineOptions 宏
2. 或者检查组件是否使用了 script setup 语法
3. 调整导出逻辑以适应现代 Vue 组件编写方式

最佳实践建议

对于使用 Vant CLI 6.0 的开发者，建议：

1. 如果项目允许升级，优先考虑使用 defineOptions 宏
2. 对于暂时无法升级的项目，可以 fork Vant CLI 并自行修改导出逻辑
3. 关注 Vant 官方更新，等待包含此修复的正式版本发布

总结

Vant CLI 6.0 的组件导出逻辑与 script setup 语法之间存在兼容性问题，这反映了现代前端工具链与传统打包逻辑之间的适配挑战。通过理解问题本质并采用适当的解决方案，开发者可以顺利地在项目中使用 script setup 语法，同时享受其带来的开发便利性。