您遇到此错误是因为应用程序构建过程是在不存在文档的服务器端完成的。您可以将一个元素附加到document
通过查找元素来设置样式querySelector
:
var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
仅当浏览器解释附加到页面的 JavaScript 时(无 Node js)。
在这种情况下,您有两种选择:
- 管理服务器端的样式(不能使用“文档”)
- 管理客户端的样式(可以使用文档)
在选项 1 - 服务器端中,您可能会放弃使用您的vue-custom-lib
打包或创建一个分支来检查环境是浏览器还是节点js。例如。:
if(process) { you are in node js }
if(window) { you are in the browser - you can use the document.querySelector }
在选项 2 中,我建议您检查 Nuxt。
您可以添加一个包document
in head.script
财产在nuxt.config.js
export default {
head: {
script: [
{ src: '...' }
]
},
您还应该阅读有关在 Nuxt 上下文中检测服务器和客户端的信息
https://nuxtjs.org/api/context/ https://nuxtjs.org/api/context/
配置构建还具有以下属性isServer
:
https://nuxtjs.org/api/configuration-build https://nuxtjs.org/api/configuration-build
附加您的自定义库也可以在renderAndGetWindow
功能
https://nuxtjs.org/api/nuxt-render-and-get-window https://nuxtjs.org/api/nuxt-render-and-get-window