Question

我觉得这应该是一件非常琐碎的事情，但是我已经挣扎了很长时间。我正在尝试在vue项目中加载静态的缩小脚本。

这是我的项目结构：

project
--  public
        index.html
--  src
        App.vue
        main.js
    --  static
            p5.min.js
            vanta.waves.min.js

我正在尝试按照here的说明进行设置：

<script src="three.r92.min.js"></script>
<script src="vanta.waves.min.js"></script>
<script>
  VANTA.WAVES('#my-background')
</script>

由于我只在一个组件中使用了脚本，所以我希望将其加载到那里，而不是将其全局地包含在index.html文件中。

export default {
  ...
  methods: {
    animate() {
      const p5Script = document.createElement('script')
      p5Script.async = true;
      p5Script.defer = true;
      p5Script.id = 'p5'
      p5Script.src = '@/static/p5.min.js';
      document.head.appendChild(p5Script);

      const vantaScript = document.createElement('script')
      vantaScript.async = true;
      vantaScript.defer = true;
      vantaScript.id = 'vanta'
      vantaScript.src = '@/static/vanta.topology.min.js'
      document.head.appendChild(vantaScript);
      vantaScript.onload = () => {
        // window???
        window.VANTA.TOPOLOGY({
          el: '#vanta',
          color: 0xced4b1,
          backgroundColor: 0xe0ebeb
        })
      }
    }
  },
  mounted() {
    this.animate();
  },
});

我正在尝试在加载后在窗口上访问VANTA对象，但是没有。刚开始我感觉我的方法是错误的，但是我找不到关于如何包含静态脚本的任何文档？

Answer 1

检查此回购中是否有可用于特定组件https://github.com/iwatakeshi/vue-vanta的带有插槽的Vue Vanta组件

Vue：加载静态脚本

1 个答案: