vue.js - 对于使用 Vue cli3 库的 Vuejs cli3 SPA 应用程序，SSR 构建表示 "document is not defined"

Question

我有一个使用 Vue CLI v3 创建的相当复杂的 SPA Vue.js 应用程序。我想转换这个应用程序以从 SSR 中受益(尽管我最终可能只使用预渲染......)

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

我可能已经阅读了世界上关于 Vue cli、vue-loader、vue-style-loader、vue.config.js、提取 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[' + ssrIdKey + '~="' + obj.id + '"]')
...

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

这是vue.config.js我的库:

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

但我也试过 extract: true和(很多)更复杂的东西......我总是得到同样的错误。

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

Answer 1

您遇到此错误是因为当应用程序构建过程是在不存在文档的服务器端完成的。您可以将一个元素附加到 document通过使用 querySelector 查找元素来设置样式:

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

仅当浏览器解释 JavaScript 附加到页面时(无节点 js)。
在这种情况下，您有两个选择:

在服务器端管理样式(您不能使用`document)

在客户端管理样式(您可以使用文档)

在选项 1 - 服务器端，您可能会放弃使用您的 vue-custom-lib打包或创建一个检查环境是浏览器还是节点js的fork。例如。:

if(process) { you are in node js }
if(window) { you are in the browser - you can use the document.querySelector } 

在选项 2 中，我建议您检查 Nuxt。
您可以使用 document 添加一个包在 head.script房产在nuxt.config.js

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