對於使用 Vue cli3 庫的 Vuejs cli3 SPA 應用程序，SSR 構建表示“未定義文檔”

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)

單擊錯誤的第一行時，我從我的 lib 的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

您遇到此錯誤是因為當應用程序構建過程是在不存在文檔的服務器端完成的。 您可以通過使用querySelector查找元素來將元素附加到document樣式：

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

僅當瀏覽器解釋 JavaScript 附加到頁面時（無節點 js）。

在這種情況下，您有兩個選擇：

1. 在服務器端管理樣式（您不能使用 `document）
2. 在客戶端管理樣式（您可以使用文檔）

在選項 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中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