VuePress在build打包時window?document?is?not?defined問題解決

更新時間：2023年07月31日 11:22:36 作者：OceanZH

這篇文章主要為大家介紹了VuePress在build打包時window?document?is?not?defined問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

前言

近期在造一個 vue 的組件庫(這也有不少故事可以講...)，造完輪子后需要編寫組件文檔，選了 vuepress，在文檔中需要代碼演示，自然就需要引入組件庫，引入組件庫后編寫文檔正常使用沒有問題，但是在 build 的時候就出麻煩了...

問題

問題一

ReferenceError: document is not defined

出現(xiàn)這個問題的原因是我在編寫 vue 組件的時候，在.vue文件中引入了樣式文件，就是下面這個樣子：

<style lang="less"> @import '../style/content.less'; </style>

這個大家應(yīng)該很熟悉了，正常的引入樣式，但是問題是組件庫代碼編譯過后，會用到 document.querySelectory() 來進行樣式處理，而 vuepress 所有的頁面在生成靜態(tài) HTML 時都需要通過 Node.js 服務(wù)端渲染, Node.js 環(huán)境中自然沒有 document 對象，這時候訪問瀏覽器/DOM 中的 API 自然會報錯。

本地開發(fā)沒有問題，但是 build 就會出錯

問題二

window is not defined

出現(xiàn)這個問題同樣是因為在編寫組件時用到了 window 對象，而 Node.js 中沒有 window 對象。

解決

第一回合

利用 vue 的動態(tài)組件

vuepress 官方給出解決辦法，就是利用 vue 的動態(tài)組件,

<template>
  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>
<script> export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      this.dynamicComponent = module.default
    })
  }
} </script>

具體查看瀏覽器的 API 訪問限制

這種方式固然能解決問題，但是很麻煩，想想我要編寫十幾個組件文檔，寫 demo 的時候每次都要這樣處理，要是遇到復(fù)雜的示例，一個 demo 里面用到了好幾個組件，那豈不是麻煩得很，不夠優(yōu)雅，不夠優(yōu)雅。

而且編寫文檔的時候，組件庫完全可以在enhanceApp.js中一次性完整引入，不需要按需引入，比如：

import Element from 'element-ui'
export default ({ Vue, options, router, siteData }) => {
    Vue.use(Element);
};

第二回合

beforeMount 或 mounted 再去訪問訪問瀏覽器 / DOM 的 AP

其實上面第一種解決辦法已經(jīng)給我們提供了思路，在 beforeMount 或 mounted 再去訪問訪問瀏覽器 / DOM 的 API。

但是按照我們的需求，這時候不能再去 demo 組件中的 mounted 單獨處理這個問題了，那我們目光又回到 enhanceApp.js，組件庫的引入可以放到這里，在這里使用 mixin 來處理。

因為是 Node.js 服務(wù)端渲染，第一想到了用 require:

import Element from 'element-ui'
export default ({ Vue, options, router, siteData }) => {
    Vue.use(Element);
    Vue.mixin({
        mounted() {
            var WisdomUI = require('wisdom-ui')
            Vue.use(WisdomUI)
        },
    })
};

build 通過

本地運行，組件加載失敗

頭大，應(yīng)該用 ES module：

import Element from 'element-ui'
export default ({ Vue, options, router, siteData }) => {
   Vue.use(Element);
   Vue.mixin({
       mounted() {
           import('wisdom-ui').then(function (m) {
               Vue.use(m.default)
           })
       },
   })
};