如何在Vue 3迁移构建中为每个外部Vue库配置单独的compconfig选项?

Question

使用Vue 3迁移构建，可以设置全局compatConfig: { mode: 2 | 3 }，也可以单独为每个组件设置，但是可以为每个库设置吗?

我正在使用BootstrapVue，它要求全局设置compatConfig: { mode: 2 }，但这破坏了许多使用新v-model属性名称的Vue 3库。可以通过在外部组件中包装组件对象来实现:

<template>
<SomeComponent />
</template>
<script setup>
import { default as C } = './vue-component'
const SomeComponent = { ...C,  compatConfig: { mode: 3 };
</script>

但是库经常使用不继承模式3的内部组件，这会破坏它们的功能。

是否有一个Vite构建步骤，我可以配置应用一个compconfig属性到我选择的模块或其他方式，我可以克服这个问题?

Answer 1

这需要一些hack，但我找到了一个解决这个问题的方法，使用yarn patch和编辑外部库的前几行来重新定义从vue导入的defineComponent。

import { defineComponent as defaultDefineComponent } from 'vue';
const defineComponent = obj => defaultDefineComponent({ ...obj, compatConfig: { mode: 3 } });

这不是一个完美的解决方案，但它确实有效。我觉得类似的东西可以通过vite和混叠来实现，但我需要在这个库上使用yarn patch来包装一个Vue 3功能组件，调用defineComponent来绕过迁移构建，而不是将类属性应用于功能组件。