vuepress设置两种主题的踩坑经历

页面需要设置亮暗两种主题,需将设置之后的主题类型存进 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');

  }

})

你可能感兴趣的:(vuepress设置两种主题的踩坑经历)