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

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');
  }
})