ReferenceError: window is not defined 。 vuepress答案

【问题标题】：ReferenceError: window is not defined . vuepressReferenceError: window is not defined 。 vuepress
【发布时间】：2019-02-08 03:33:24
【问题描述】：

我在 vuepress 中使用 canvas-nest.js（从 'canvas-nest.js' 导入 CanvasNest）当我使用 yarn dev 时它可以工作；但是当我使用yarn build时它会出错：

Rendering static HTML...
Rendering page: / FAIL  Error rendering /:ReferenceError: window is not defined
    at Object.<anonymous> (node_modules/canvas-nest.js/lib/utils.js:11:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.module.exports.Object.defineProperty.value (node_modules/canvas-nest.
js/lib/CanvasNest.js:16:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.module.exports.Object.defineProperty.value (node_modules/canvas-nest.
js/lib/index.js:7:0)
    at __webpack_require__ (webpack/bootstrap:25:0)

我该如何解决？

【问题讨论】：

似乎是一个常见问题（现在正在与同样的事情作斗争）并且没有太多关于修复它的好信息。

标签： webpack vuepress

【解决方案1】：

我在导入 scrollmagic 时遇到了同样的问题。我通过组件解决了，它不像往常一样使用 import ScrollMagic from 'scrollmagic' 导入脚本，而是在通过挂载钩子请求的方法函数中使用 const ScrollMagic = require('scrollmagic') 。例如。

<script>
import { TweenMax, TimelineMax, Sine } from 'gsap'
DO NOT MAKE WINDOW IMPORT REQUESTS HERE
// import ScrollMagic from 'scrollmagic'
// import 'animation.gsap'

export default {
  data() {
    return {
     box:'.box'
     };
  },
methods: { 
    animate(){
      const ScrollMagic = require('scrollmagic') 
      const animationGsap = require('@dk-animationGsap') 

      const controller = new ScrollMagic.Controller();
        let tween = new TimelineMax ()
            .add([
          TweenMax.staggerFromTo(this.box, 0.5, {autoAlpha:0,y:-200,scale:0.9}, {autoAlpha:1,y:100,scale:1,ease: Back.easeOut.config(1.75)}, 1)
         ]);

      const scene = new ScrollMagic.Scene({
        triggerHook: 'onEnter',
          duration: 400,    
          offset: 0
        })
        .setTween(tween)
        .addTo(controller);
    }
  },
  mounted() { 
   this.animate()
  },

}
</script>

【讨论】：