如果我使用this。$ el.querySelector而不是document.querySelector查找我的目标元素，animejs将无法正常工作

Question

我遇到了一个问题，但我不知道为什么。它可以在DEVELOP中运行，但是在构建dist时不起作用。我正在使用animejs在Vue.js组件中为某些SVG设置动画。

我有类似的东西：

const svgElement = this。$ el.querySelector（'＃...'） animatejs（{   目标：svgElement }）

它不起作用。我将选择器更改为：

const svgElement = document.querySelector（'＃...'）

它有效。

我正在使用vue-cli运行vue 2，

这是更改之前的旧代码。请参见animateGraph（）和pathX选择器。这些都不起作用。

javascript

import anime from 'animejs'

export default {
  name: 'svgHomeHero',
  data: function() {
    return {
      animeTime: 1000,
      animeDelay: 600,
      animeEase: 'easeOutCubic',
    }
  },
  methods: {
    preloader: function () {
      const svgHomeHero = document.querySelector('#home-hero .svg')
      const descriptionHero = document.querySelector('#home-hero .description')

      let svgHomeHeroAnime = anime({
        targets: svgHomeHero,
        easing: this.animeEase,
        direction: 'alternate',
        loop: false,
        duration: this.animeTime,
        maxWidth: '100%',
        delay: this.animeDelay
      })

      setTimeout(() => {
        this.animeGraph()
        let descriptionHeroAnime = anime({
          targets: descriptionHero,
          easing: this.animeEase,
          direction: 'alternate',
          loop: false,
          duration: this.animeTime,
          opacity: '1',
          delay: this.animeDelay
        })  
      }, 2000) 

    },
    animeGraph: function() {  
      // Path1
      const path1 = this.$el.querySelector('#Path1')
      let path1Anime = anime({
        targets: path1,
        easing: this.animeEase,
        direction: 'alternate',
        loop: false,
        duration: this.animeTime,
        delay: this.animeDelay,
        d:[ { value: "M0,534 C315,534 376.9,444 637,444 C1034.9,444 1161,717 1612,717 C2168,717 2159,240.73 2619.51,240.73 C2956,240.73 3144.51,534 3269,534" }]
      })

      // Path2
      const path2 = this.$el.querySelector('#Path2')
      let path2Anime = anime({
        targets: path2,
        easing: this.animeEase,
        direction: 'alternate',
        loop: false,
        duration: this.animeTime,
        delay: this.animeDelay,
        d:[ { value: 'M0,534 C143,534 545,717 807,717 C1326,717 1763,237 2185,237 C2637,237 3055,534 3269,534'}]
      })

      // Path3
      const path3 = this.$el.querySelector('#Path3')
      let path3Anime = anime({
        targets: path3,
        easing: this.animeEase,
        direction: 'alternate',
        loop: false,
        duration: this.animeTime,
        delay: this.animeDelay,
        d:[ { value: 'M0,534 C130,534 279,310 512,310 C745,310 963,754 1313,754 C1663,754 1979,0 2303,0 C2530.72,0 3081.2,534 3269,534'}]
      })  
    }
  },
  mounted: function () {
    this.preloader()
  }
}

pug

<svg width="3269px" height="760px" viewBox="0 0 3269 760" version="1.1" preserveAspectRatio="xMidYMax" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="0.25" fill="none" fill-rule="evenodd">
        <g id="Desktop" transform="translate(-307.000000, -174.000000)" stroke-width="2">
            <g id="-Graph-(2)" transform="translate(307.000000, 177.000000)">
                <path d="M0,534 C315,534 376.9,535.75 637,535.75 C1034.9,535.75 1161,537.5 1612,537.5 C2168,537.5 2159,537.5 2619.51,537.5 C2956,537.5 3144.51,534 3269,534" id="Path1" stroke="#9BCEA4"></path>
                <path d="M0,534 C143,534 545,537.5 807,537.5 C1326,537.5 1763,537.5 2185,537.5 C2637,537.5 3055,534 3269,534" id="Path2" stroke="#81CFA3"></path>
                <path d="M0,534 C130,534 279,535.75 512,535.75 C745,535.75 963.407676,537.5 1313.40768,537.5 C1663.40768,537.5 1979,537.5 2303,537.5 C2530.72,537.5 3081.2,534 3269,534" id="Path3" stroke="#398585"></path>
                <path d="M0,534 C130,534 279,310 512,310 C745,310 963,754 1313,754 C1663,754 1979,0 2303,0 C2530.72,0 3081.2,534 3269,534" id="Path4" stroke="transparent"></path>
            </g>
        </g>
    </g>
</svg>

所以，我解决了更改选择器的问题，避免了this。$ el.querySelector并使用document.querySelector，但我不知道为什么。

已解决：App.vue模板中没有#app会导致所有应用程序出现意外行为。没有错误或警告消息。