vue.js - 当 extract_css: false 时，文档未在导入到 Nuxt 的 Vue 组件中定义

Question

我使用 @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 项目中并捆绑样式？

标签： vue.jswebpacknuxt.jsvue-cli

Answer 1

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

尝试这个：

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