异步加载Vue时如何加载Vue插件?

时间:2019-01-18 22:53:36

标签: vue.js webpack

我对使用vue和webpack有点陌生,我正在尝试设置一个表单组件。我收到一个错误消息:“未捕获(承诺)TypeError:Vue.use不是函数”。我正在使用的代码是此处代码的修改:https://auralinna.blog/post/2018/how-to-build-a-complete-form-with-vue-js

我正在异步将Vue加载到我的应用程序中,所以我认为问题可能是Vue尚未加载,但我还不足以肯定地说。

这是我的主要app.js文件:

// App main
const main = async () => {
// Import our CSS
//const Styles = await import(/* webpackChunkName: "styles" */ '../css/app.pcss');
// Async load the vue module
const Vue = await import(/* webpackChunkName: "vue" */ 'vue');
const VueI18n = await import(/* webpackChunkName: "vue-i18n" */ 'vue-i18n');
const Vuelidate = await import(/* webpackChunkName: "vuelidate" */ 'vuelidate');
const translations = await import(/* webpackChunkName: "translations" */ '../resources/translations');
const Scrollmagic = await import(/* webpackChunkName: "scrollmagic" */ 'scrollmagic');

Vue.use(VueI18n);
Vue.use(Vuelidate);

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

// process layout images



// Create our vue instance
const vm = new Vue.default({
    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() {
    },
});
};

控制台中的错误消息显示“未捕获(承诺)TypeError:Vue.use不是函数”,并且发生在第14行:Vue.use(VueI18n);

我正在尝试解决错误,以便希望表单组件能够呈现。谁能指出我需要解决的问题?

0 个答案:

没有答案