# 如何解决 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

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

# 原因

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

提示

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

# 解决

# 结语

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

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

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

# 相关参考文档

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐