現象:
?原因: 該錯誤表明在服務端渲染 (SSR) 過程中,有一些代碼嘗試在沒有瀏覽器環境的情況下執行與瀏覽器相關的操作。這在服務端渲染期間是一個常見的問題,因為在服務端渲染期間是沒有瀏覽器 API。
解決辦法:
1. 修改原始代碼: 避免在組件代碼中使用dom的原生api
備注:組件代碼是指.vue這樣的程序文件,它會被打包到server-bundle這樣的服務端渲染js程序中,運行環境是node, 所以沒法識別這些dom對象的api。
?而js,ts文件則會打包到client-bundle的客戶端渲染js程序中,是使用script標簽嵌入html文件中,運行環境是瀏覽器,所以不會有這個問題:
2. 使用jsdom模擬瀏覽器環境:
在ssr服務端的啟動程序中加入以下代碼
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
global.window = dom.window;
global.document = dom.window.document;
?
?但注意:jsdom的版本不可過高,否則會報錯:SyntaxError: Unexpected token '||='
?
因為:??||=
這個新的 JavaScript 語法,它是 ECMAScript 2022 中的新特性,但可能在當前的 Node.js 版本中不被支持,必須降低jsdom版本到兼容當前node版本的版本