问Nuxt插件进口滥用供应商

EN

如果您试图找到将组件与vendor分离的方法，但是您得到了一个document is not defined错误，您可以使用这个语法导入您的组件，它将使用您的组件创建一个单独的块，并且只在客户端使用它。

components: {
  Datepicker: () => import('vue-datepicker')
}

另外，在大多数情况下，将组件包装在<client-only>标记中会很有帮助。

因此，对于这种用例，基本上有一个特性请求打开。

但是看看Nuxt生命周期，它看起来就像是在VueJS实例完成之前就导入了插件。因此，如果它是在Vue之前完成的，就不能延迟加载它。

但是，您可以将vuejs-datepicker完全导入页面本身，而不是整个项目。这可能就足够了

import Datepicker from 'vuejs-datepicker' // then simply use `Datepicker` in the code below

如果不是，您可以尝试以下解决方案：https://github.com/nuxt/nuxt.js/issues/2727#issuecomment-362213022

// plugins/my-plugin
import Vue from 'vue'
export default () => {
  // ...
  Vue.use(....)
}

// adminLayouts
import myPlugin from '~/plugins/my-plugin'
export default {
  created() {
    myPlugin()
  }
}

因此，缺点是，每次需要组件时，您都必须导入它，而不是全局导入它，但它也允许您只在相关的页面上加载它，并且让它在每个页面/组件上分块。

我试图导入的插件使用了window。因此，在我的例子中，任何其他建议的解决方法仍然会导致nuxt崩溃或出错。我搜索了整个万维网，下面的解决方案是唯一允许我的应用程序运行的解决方案。

与使用ES6导入插件不同，您可以在挂载钩子中导入插件，这应该只在客户机中运行。所以：

async mounted() {
  const Datepicker = await import('vuejs-datepicker');
  Vue.use(Datepicker);
}

我不知道您试图使用的具体插件，但在我的示例中，我不得不在插件的默认属性上调用Vue.use()，从而生成Vue.use(MyPlugin.default)。