你遇到的问题核心在于异步导入Vue及相关插件时，没有正确获取到它们的默认导出对象。

当你用await import()语法加载ES模块时，返回的是一个包含所有导出项的模块对象，真正的Vue构造函数、VueI18n/Vuelidate插件都在这个对象的default属性里。你之前创建Vue实例时用了new Vue.default，说明已经注意到了这一点，但调用Vue.use时却直接用了模块对象，自然会找不到use方法。

修复步骤 #

修改你的导入语句，直接解构获取default导出：

const main = async () => {
    // 正确解构获取Vue构造函数
    const { default: Vue } = await import(/* webpackChunkName: "vue" */ 'vue');
    // 同样处理VueI18n和Vuelidate
    const { default: VueI18n } = await import(/* webpackChunkName: "vue-i18n" */ 'vue-i18n');
    const { default: Vuelidate } = await import(/* webpackChunkName: "vuelidate" */ 'vuelidate');
    
    const translations = await import(/* webpackChunkName: "translations" */ '../resources/translations');
    const Scrollmagic = await import(/* webpackChunkName: "scrollmagic" */ 'scrollmagic');

    // 现在可以正常调用Vue.use了
    Vue.use(VueI18n);
    Vue.use(Vuelidate);

    const i18n = new VueI18n({
        locale: 'en',
        fallbackLocale: 'en',
        messages: translations
    })

    // ... 其余代码保持不变
    const vm = new Vue({ // 这里也可以去掉.default了，因为Vue已经是构造函数
        el: "#app",
        i18n,
        delimiters: ['[[', ']]'],
        components: {
            'carousel': () => import(/* webpackChunkName: "vue-owl-carousel-br" */ '../vue/vue-owl-carousel-br/src/Carousel.vue'),
            'appForm': () => import(/* webpackChunkName: "app-form" */ '../vue/form/form.vue'),
        },
        data: {
            menuActive: false,
            footerActive: false,
        },
        methods: {
        },
        mounted() {
        },
    });
};

额外说明 #

• 这样修改后，Vue变量直接指向Vue的构造函数，调用Vue.use就不会再报错了，同时创建实例时也不需要再写Vue.default。
• 对于translations这类自定义模块，如果你的导出是默认导出，也建议用同样的解构方式；如果是命名导出，就按需解构对应的属性。

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