如何解决 vuepress 编译打包失败即 window is not defined 问题

# 如何解决 vuepress 编译打包失败即 window is not defined 问题

在vuepress中若是使用了document,以及window对象,比如获取 DOM 节点document.getElementById,document.querySelector,或使用了window.onload

在编译运行时,执行npm run dev是没有任何问题的,但是在build构建时,就出现了问题,要么报ReferenceError: document is not defined,或ReferenceError: window is not defined

当去掉代码中的window或document再次打包时,则能打包成功

因为使用vuepress所生成的静态HTML时,都需要通过Node.js服务端渲染,而在服务端Node.js的坏境中是没有document以及window对象,这时候访问浏览器/DOM 中的 API,它就会报错

提示

本地开发npm run dev没有问题,但是执行npm run build就会报错

主要需要注意在vuepress中,若使用了window或document对象,在运行时,因为在浏览器上跑,是没有问题的

但是打包时,由于vuepress依赖Node.js服务器,而它没有window,document对象,当用到了 js 对象操作 dom 时

就会报错,具体解决见上面方案

留言

解答