vuepress 引入 iconfont.js 打包时报错 window is not defined

最新推荐文章于 2025-06-26 20:48:01 发布

原创最新推荐文章于 2025-06-26 20:48:01 发布 · 3.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vuepress

前端同时被 3 个专栏收录

25 篇文章

订阅专栏

18 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

本文详细介绍了在VuePress项目中引入IconFont图标库时遇到的打包错误问题，特别是windowisnotdefined错误，并提供了在增强应用程序脚本中正确加载IconFont的解决方案，以及如何避免在静态HTML生成过程中因访问DOM而引发的错误。

vuepress 引入 iconfont.js 打包时报错 window is not defined

情景复现

在 enhanceApp.js 中直接引入 iconfont.js ，npm run docs:build 的时候会报 window is not defined 错误，查看 iconfont.js 看到在函数模块化后面传入了全局变量 window

出现问题的原因

当开发 VuePress 应用时，由于所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染，因此需确保只在 beforeMount或者 mounted 访问浏览器 / DOM 的 API

解决方法

<script>
export default {
  mounted () {
    import('./iconfont.js').then(icon => {})
  }
}
</script>

其他类似情况

页面需要设置亮暗两种主题，需将设置之后的主题类型存进 localStorage ，如果直接在 enhanceApp.js 中初始化，打包时会报 document is not defined ，window is not defined

解决方案

定义一个全局 mixin ，将主题类型初始化放在 mounted 生命周期钩子里

Vue.mixin({
  mounted() {
    document.body.setAttribute('data-theme', window.localStorage.getItem('data-theme') || 'light');
    window.localStorage.setItem('data-theme', window.localStorage.getItem('data-theme') || 'light');
  }
})