1

我canvas-nest.js在 vuepress 中使用（从'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)

我该如何解决？

4

1 回答 1

0

我在导入 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>
于 2019-11-19T16:43:01.653 回答