Vue 混合库和应用构建，如何处理 Vue 实例？

Question

当我们开始使用 Vue 时，我们将所有组件构建为库，并将 Vue 运行时包含在 HTML 头部中，并且在整个主体周围有一个愚蠢的根实例，因此我们可以在任何需要的地方使用自定义标签。为了优化构建过程和一般代码清理，我现在想将其更改为应用程序构建，这是 VueCLI 的默认设置。问题是，我们有两个大型的第三方组件：VueGoodTable 和 tiptap (an RTE)，后者有一些定制。所以为了保持供应商块的小，我想把这两个作为两个独立的库，因为它们不是到处都需要的。

现在的问题是，这些库需要一个全局 Vue，因此它们也可以全局注册自己。对于 VGT，我们有一个小的包装器（也是因为我们使用了 TypeScript）：

import Vue from 'vue';
import 'vue-good-table/dist/vue-good-table.css';
import '@/assets/vue-good-table-custom.css';
const VueGoodTable: any = {
    'vue-good-table': require('vue-good-table').VueGoodTable,
};
Vue.component('VueGoodTable', VueGoodTable);

我们还有一些全局过滤器，所以我想我也可以在那里公开 Vue：

import Vue from 'vue';
import dayjs from 'dayjs';

import './assets/global.css';

Vue.filter('formatDate', (dateStr: string) => {
    if (dateStr) {
        return dayjs(dateStr).format('DD.MM.YYYY HH:mm');
    }
});
Vue.filter('displayUser', (userObj: any) => {
    if (userObj) {
        if (userObj.firstName && userObj.lastName) {
            return userObj.firstName + ' ' + userObj.lastName;
        }
        return userObj.email;
    }
});

window.Vue = Vue;

由于某种原因，这在一个页面上有效，但在其他页面上无效； Cannot read property 'component' of undefined 我们这样做的地方：Vue.component('VueGoodTable', VueGoodTable);

两个问题：

1. 这是全局公开 Vue 的正确方法吗？
2. 有没有办法像库构建一样从应用构建中排除 Vue？我找到了在库构建中包含 Vue 的选项，但反之则不行。

也欢迎任何其他关于如何处理此问题的建议。

编辑： 我发现它为什么不工作，vue.config.js 对于工作的一个页面是不同的。但我会保持这个问题的开放性，因为我想知道“更好”的方法来处理这个问题。

Answer 1

似乎将您的库公开为Vue plugin 可能是一个不错的选择。这样，您就不需要全局 Vue 实例，而是在安装时将 Vue 实例传递到库中。

https://vuejs.org/v2/guide/plugins.html#Writing-a-Plugin