s-s-r 版本为使用 Vue cli3 库的 Vuejs cli3 SPA 应用程序说“未定义文档”

Posted 2023-02-16

【中文标题】s-s-r 版本为使用 Vue cli3 库的 Vuejs cli3 SPA 应用程序说“未定义文档”

【英文标题】：s-s-r build says "document is not defined" for a Vuejs cli3 SPA app using a Vue cli3 library

【发布时间】：2019-11-27 20:38:27

【问题描述】：

我有一个使用 Vue CLI v3 创建的相当复杂的 SPA Vue.js 应用程序。我想改造这个应用程序以从 s-s-r 中受益（尽管我最终可能只使用预渲染......）

我的应用程序也在使用使用 CLI v3 创建的自定义 Vuejs 库。这些库嵌入了 CSS，我想继续这样做。

我可能已经阅读了世界上在 Vue cli、vue-loader、vue-style-loader、vue.config.js、extract css 等方面产生的所有内容，但我一直失败。

这是我加载给定路线时正在运行的应用程序的错误消息：

ReferenceError: document is not defined
    at addStyle (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:699:22)
    at addStylesToDom (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:683:20)
    at addStylesClient (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:637:3)
    at Object.3351 (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:500:14)
    at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
    at Object.d12e (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:3590:380)
    at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
    at Module.fae3 (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:3859:51)
    at __webpack_require__ (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:21:30)
    at /Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:85:18
    at Object. (/Users/onekiloparsec/code/my-app/node_modules/vue-custom-lib/dist/vue-custom-lib.common.js:88:10)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

单击错误的第一行时，我从我的库的commonjs 文件中获得以下代码：

function addStyle (obj /* StyleObjectPart */) 
  var update, remove
  var styleElement = document.querySelector('style[' + s-s-rIdKey + '~="' + obj.id + '"]')
...

我不知道是否需要更改我的库（我认为是）或我的应用程序中的内容，或两者兼而有之。

这是我的库的vue.config.js：

module.exports = 
  css: 
    extract: false
  

但我也尝试了extract: true 和（很多）更复杂的东西......我总是遇到同样的错误。

有没有办法将 Vue cli 3 lib 与 CSS 集成到 s-s-r Vue 应用程序中？？？非常感谢。

【问题讨论】：

我刚刚遇到同样的问题....尝试将@vue/cli-service 更新到最新版本（在撰写本文时，它是 3.11.0）

同样的问题 - 运气好吗？

【参考方案1】：

您遇到此错误是因为在构建应用程序时，过程是在不存在文档的服务器端完成的。您可以通过查找具有querySelector 的元素来将元素附加到document 样式：

  var styleElement = document.querySelector('style[' + s-s-rIdKey + '~="' + obj.id + '"]')

仅当浏览器解释附加到页面的 javascript 时（无节点 js）。

在这种情况下，您有两种选择：

在服务器端管理样式（不能使用 `document） 在客户端管理样式（您可以使用文档）

在选项 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。

您可以在nuxt.config.js 的head.script 属性中添加具有document 的包

export default 
  head: 
    script: [
       src: '...' 
    ]
  ,

您还应该阅读有关在 Nuxt 上下文中检测服务器和客户端的信息

https://nuxtjs.org/api/context/

同样具有isServer属性的配置构建：

https://nuxtjs.org/api/configuration-build

也可以在 renderAndGetWindow 函数中添加自定义库

https://nuxtjs.org/api/nuxt-render-and-get-window