# 如何解决 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 时
就会报错,具体解决见上面方案
# 相关参考文档
分享
留言
解答
收藏