快捷導(dǎo)航

VuePress在build打包時(shí)window?document?is?not?defined問(wèn)題解決

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

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

前言

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

問(wèn)題

問(wèn)題一

ReferenceError: document is not defined

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

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

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

本地開(kāi)發(fā)沒(méi)有問(wèn)題，但是 build 就會(huì)出錯(cuò)

問(wèn)題二

window is not defined

出現(xiàn)這個(gè)問(wèn)題同樣是因?yàn)樵诰帉?xiě)組件時(shí)用到了 window 對(duì)象，而 Node.js 中沒(méi)有 window 對(duì)象。

解決

第一回合

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

vuepress 官方給出解決辦法，就是利用 vue 的動(dòng)態(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 訪問(wèn)限制

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

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

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

第二回合

beforeMount 或 mounted 再去訪問(wèn)訪問(wèn)瀏覽器 / DOM 的 AP

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

但是按照我們的需求，這時(shí)候不能再去 demo 組件中的 mounted 單獨(dú)處理這個(gè)問(wèn)題了，那我們目光又回到 enhanceApp.js，組件庫(kù)的引入可以放到這里，在這里使用 mixin 來(lái)處理。

因?yàn)槭?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 通過(guò)

本地運(yùn)行，組件加載失敗

頭大，應(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)
           })
       },
   })
};

本地運(yùn)行沒(méi)有問(wèn)題
build 正常

問(wèn)題解決。

以上就是VuePress在build打包時(shí)window document is not defined問(wèn)題解決的詳細(xì)內(nèi)容，更多關(guān)于VuePress build打包問(wèn)題解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: