nuxt 延迟加载插件与 vue 2.6.12

Question

我构建了简单的 vue js 插件（vee-validate 上的包装器），并希望在组件水合物和加载时包含它，但是面临 vue 的问题，该插件不允许在应用程序初始化后注册组件。有人可以提供我如何解决这个问题的解决方案吗？

我的组件.vue

<template>
  <div v-if="scriptLoaded">
    <validated-input/> <!--  injected from plugin.js -->
    <autocomplete-input/>

  </div>
</template>
<script>
import Vue from 'vue';

export default {
  data() {
    return {
      scriptLoaded: false,
    };
  },
  async created() {
    if (process.client && !window.scriptValidatedInputLoaded) {
      window.scriptValidatedInputLoaded = true;

      const ValidatedInput = await import('plugin.js');
      Vue.use(ValidatedInput.default);
      this.scriptLoaded = true;
    }
  },
}; 
</script>

插件.js

import AutoCompleteInput from './components/AutoCompleteInput.vue';
import ValidatedInput from './components/ValidatedInput.vue';
import VeeValidate from 'vee-validate';
import Multiselect from 'vue-multiselect';
import MaskedInput from 'vue-masked-input';
import VueMask from 'v-mask';

import 'vue-multiselect/dist/vue-multiselect.min.css';

export default {
  install(Vue, options) {
 
    Vue.component('autocomplete-input', AutoCompleteInput);
    Vue.component('multiselect', Multiselect);
 
    Vue.use(VeeValidate, {
      inject: ['$validator'],
      fieldsBagName: 'veeFields',
    });

    Vue.component('MaskedInput', MaskedInput);
    Vue.use(VueMask);
    VeeValidate.Validator.localize('en', dict);
    Vue.component('validated-input', ValidatedInput);
  },
};

页面.vue

<template>
  <MyComponent/><!-- will load and render only when user visit the page-->
</template>
<script>
export default{
      components: {
      MyComponent: () => import('../MyComponent'),
    },
}
</script>

Answer 1

像这样更新你的代码：

我的组件.vue： 使用 Vue 的异步组件加载来加载组件。

<template>
<div>
    <validated-input/> <!-- injected from plugin.js -->
    <autocomplete-input/>
</div>
</template>
<script>
export default {
// ...
};
</script>

插件.js： 从安装功能中删除组件注册。

import VeeValidate from 'vee-validate';

export default {
install(Vue, options) {
    Vue.use(VeeValidate, {
    inject: ['$validator'],
    fieldsBagName: 'veeFields',
    });
},
};

页面.vue： 对 MyComponent 使用异步组件加载。

<template>
<MyComponent/>
</template>
<script>
export default {
components: {
    MyComponent: () => import('../MyComponent'),
},
};
</script>