Vitepress集成@discord-message-components/vue构建报错求助

根据错误提示，@discord-message-components/vue属于CommonJS模块，在ES模块环境下无法直接使用命名导入。开发阶段Vite的兼容处理掩盖了这个问题，但构建时会严格遵循ES模块规范，因此触发报错。

修复步骤 #

1. 修改导入语句 #

将原来的命名导入改为默认导入后解构：

// 替换原有的命名导入代码
import pkg from '@discord-message-components/vue';
const {
    DiscordButton,
    DiscordButtons,
    DiscordEmbed,
    DiscordEmbedField,
    DiscordEmbedFields,
    DiscordInteraction,
    DiscordMarkdown,
    DiscordMention,
    DiscordMessage,
    DiscordMessages,
    DiscordReaction,
    DiscordReactions,
    install: DiscordMessageComponents,
} = pkg;
import '@discord-message-components/vue/dist/style.css';

2. 保留原有组件注册逻辑 #

后续的app.use和app.component注册代码无需修改，因为解构后的变量名与之前完全一致，不影响功能逻辑。

可选：添加Vite依赖优化配置（若仍有问题） #

如果修改导入后构建仍报错，可在.vitepress/config.ts中添加优化配置，强制Vite正确处理该CommonJS包：

export default defineConfig({
  vite: {
    optimizeDeps: {
      include: ['@discord-message-components/vue'],
      esbuildOptions: {
        target: 'es2020'
      }
    }
  }
})

完成上述修改后，重新执行docs:build即可正常完成构建。

内容的提问来源于stack exchange，提问作者DVOX