Webpack 在vue组件中加载外部JS文件

我试图在.vue文件中使用外部js文件，但出现错误：

[Vue warn]: Method "solarSystemAnimations" has type "object" in the component definition. Did you reference the function correctly?

found in

---> <SolarSystem> at src/views/SolarSystem.vue
       <App> at src/App.vue
         <Root>

我的.vue文件如下所示：

<template>
  <div class="solarSystem" @load="solarSystemAnimations">
    <div class="opening hide-UI view-2D zoom-large data-close controls-close">
....
</template>

<script>
import solarSystemAnimations from "@/assets/js/solarSystemAnimations.js";

export default {
  name: "SolarSystem",
  methods: {
    solarSystemAnimations: solarSystemAnimations
  }
};
</script>

---

我已经浏览了很多帖子，但在我的情况下似乎什么都不起作用。任何提前感谢的帮助。

在Vue中，您通常使用lifecyle挂钩在DOM加载的特定阶段调用函数。因为您正在引用窗口加载，所以Vue等价物将是一个挂载的钩子。您可以在Vue组件中进行如下重构，无需外部文件：

methods: {
functionBlah () {
      const body = document.getElementsByTagName("BODY")[0],
        universe = document.getElementById("#universe"),
        solarsys = document.getElementById("#solar-system")
       ...
     }
},

mounted() {
this.functionBlah();
}

---

导入Console.log SolarSystemImations后，将其保存。你应该在那里找到你的错误。Vue告诉您它不是一个函数。好的，我看到SolarSystemImations是控制台中的一个对象，但我如何将其作为函数保存？我不明白什么，谢谢。导出默认函数{console.log'hello world'}。从那里开始修改，我明白了。谢谢你的指导…谢谢。但是我想从vue实例中抽象出函数，因为它的长度和复杂性。这就是我想导入它的原因。

methods: {
functionBlah () {
      const body = document.getElementsByTagName("BODY")[0],
        universe = document.getElementById("#universe"),
        solarsys = document.getElementById("#solar-system")
       ...
     }
},

mounted() {
this.functionBlah();
}