Question

我在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)

我该如何解决？

Answer 1

我在导入scrollmagic时遇到了同样的问题。我通过按组件解析，而不是像往常一样从'scrollmagic'导入具有import 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>

ReferenceError：窗口未定义。 Vuepress

1 个答案: