Nuxt插件导入滥用厂商

Question

我正在尝试在 nuxt 应用程序中使用 vuejs-datepicker，一切都由 nuxt 插件使用标准完成。

plugins/vue-datepicker.js

import Vue from 'vue'
import Datepicker from 'vuejs-datepicker'

Vue.component('Datepicker', Datepicker)

nuxt.config.js

plugins: [
  { src: '~/plugins/vue-datepicker', ssr: false }
],

但即使不使用它，我也会在构建后的 vendors/app....js 中上传它的 dist。如何让 nuxt 为它创建一个单独的块并仅在使用它的页面中导入该块？

Answer 1

是的，对于这种用例，基本上有一个功能请求 open。

但是看看 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()
  }
}

因此，缺点是每次需要时都必须导入组件，而不是全局使用它，但它也允许您只在相关页面上加载它，并按 page/component.

Answer 2

如果您试图找到一种方法将组件从 vendor 中拆分出来，但您遇到了 document is not defined 错误，您可以使用此语法导入您的组件，它将创建一个单独的块使用您的组件并仅在客户端使用它。

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

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

Answer 3

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

不是使用 ES6 导入来导入插件，您可以将其导入到挂载的挂钩中，这应该运行仅在客户端中。所以：

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

我不知道您尝试使用的具体插件，但在我的例子中，我不得不在插件的默认属性上调用 Vue.use()，结果是 Vue.use(MyPlugin.default).

Nuxt插件导入滥用厂商

Nuxt plugin imports abuse vendors

javascript

datepicker

webpack

vue.js

nuxt.js