当 extract_css: false 时，文档未在导入到 Nuxt 的 Vue 组件中定义答案

【问题标题】：document is not defined in a Vue component imported to Nuxt when extract_css: false当 extract_css: false 时，文档未在导入到 Nuxt 的 Vue 组件中定义
【发布时间】：2020-05-20 09:07:14
【问题描述】：

我使用 @vue/cli 构建了一个 Vue 组件，并尝试将其作为依赖项导入 Nuxt 应用程序。该组件使用--target lib 构建，并编译为.umd.js 源代码。

当我将 vue.config.js 与以下设置一起使用时：

module.exports = {
  css: { extract: false }
}

组件样式包含在包中，导致在包文件的以下行中抛出错误document is not defined

...
var styleElement = document.querySelector('style[' + ssrIdKe`
...

如果我将提取值设置为 true，组件可以完全正常工作，但显然这需要手动导入捆绑的 CSS 文件（我想避免这种情况）

是否有任何解决方案可以将自定义组件包含在 Nuxt 项目中并捆绑样式？

【问题讨论】：

你是如何在 Nuxt 中注册 Vue 组件的？
in package.json 我添加了"header": "*" 然后使用lerna bootstrap monorepo 工具在本地引导该组件，该工具从其本地文件夹创建指向node_modules 文件夹的符号链接。
您找到解决方案了吗？我现在也有同样的情况。
很遗憾没有，我已经放弃了共享库的想法，而是直接导入文件。

标签： vue.js webpack nuxt.js vue-cli

【解决方案1】：

这是由于服务器端渲染造成的。如果您需要指定仅在客户端导入资源，则需要使用 process.client 变量。

试试这个：

if (process.client) {
  var styleElement = document.querySelector('style[' + ssrIdKe`
}

【讨论】：