如何将Vue组件构建为具有SSR支持的Nuxtjs的库？

编程问答 2022-08-10

问题描述

我在monorepo环境中有两个软件包，

  1. 一个nuxtjs应用。
  2. Vue 2组件库。

我正在尝试将组件包构建为"Library"，以便可以在Nuxt应用程序中导入组件。

在构建-安装-导入库之后，nuxt引发以下错误：

document is not defined

在库构建内部

function o(e) {
  var t,n,i = document.querySelector('style[data-vue-ssr-id~="' + e.id + '"]');
  if (i) {
    if (f) return g;
    i.parentNode.removeChild(i)
  }
  if (m) {

我发现这是因为nuxt在尝试在服务器端呈现页面时遇到了浏览器的document对象。

只是一个想法，是因为我使用的是组件内样式吗？

如果有人可以确认，那就太好了

解决方法

如果您想创建完整的Vue SSR库，则可以遵循此非常有用的guide。

否则，您可以通过这种方式告诉Nuxt仅在客户端上加载库：

  1. 在您的Nuxt应用程序中创建文件plugins/my-vue-library-plugin.js

  2. 用此内容填充以导入Vue组件库：

    import Vue from 'vue'
import MyLibrary from 'my-vue-library-path'

Vue.use(MyLibrary)

  3. 然后将文件路径添加到我们的plugins的{​​{1}}键内

    nuxt.config.js

如何查看 export default { plugins: [ { src: '~/plugins/my-vue-library-plugin.js',mode: 'client' } ] } 属性是关键，因为告诉Nuxt仅在客户端加载库，所以您的mode: 'client'错误应该消失。

让我知道是否有帮助。

babeljsjavascriptmonoreponuxt.jsvue.js