Question

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

一个nuxtjs应用。
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对象。

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

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

Answer 1

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

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

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

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

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

Vue.use(MyLibrary)

然后将文件路径添加到我们的plugins的{{1}}键内
```
nuxt.config.js
```

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

让我知道是否有帮助。

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

1 个答案: