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

Question

我在 monorepo 环境中有两个包，

1. 一个 nuxtj 的应用程序。

2. 一个 Vue 2 组件库。

我正在尝试将组件包构建为“库”，以便我可以在 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) {

             

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

想一想，是不是因为我使用了组件内样式？

如果有人可以确认它会很棒吗？

Answer 1

如果你想创建一个完整的 Vue SSR 库，你可以遵循这个非常有用的指南。否则你可以通过这种方式告诉 Nuxt 只在客户端加载你的库：在您的 Nuxt 应用程序中创建文件plugins/my-vue-library-plugin.js用这个内容填充它以导入你的 Vue 组件库：import Vue from 'vue'import MyLibrary from 'my-vue-library-path'Vue.use(MyLibrary)plugins然后在我们的密钥中添加文件路径nuxt.config.js export default {   plugins: [     { src: '~/plugins/my-vue-library-plugin.js', mode: 'client' }   ] }如何查看该mode: 'client'属性是关键，因为它告诉 Nuxt 仅在客户端加载库，因此您的document is not defined错误应该会消失。让我知道是否有帮助。