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

Question

我在 monorepo 环境中有两个包，一个 nuxtj 的应用程序。一个 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错误应该会消失。

让我知道是否有帮助。