前言

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

問(wèn)題

問(wèn)題一

ReferenceError: document is not defined

出現(xiàn)這個(gè)問(wèn)題的原因是我在編寫 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ò)。

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

問(wèn)題二

window is not defined

出現(xiàn)這個(gè)問(wèn)題同樣是因?yàn)樵诰帉懡M件時(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)題，但是很麻煩，想想我要編寫十幾個(gè)組件文檔，寫 demo 的時(shí)候每次都要這樣處理，要是遇到復(fù)雜的示例，一個(gè) demo 里面用到了好幾個(gè)組件，那豈不是麻煩得很，不夠優(yōu)雅，不夠優(yōu)雅。

而且編寫文檔的時(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)文章！

最新評(píng)論