如何将脚本添加到 Vue 组件？

Posted 2023-02-22

【中文标题】如何将脚本添加到 Vue 组件？

【英文标题】：How to add script to Vue component?

【发布时间】：2021-09-04 12:39:33

【问题描述】：

我有 html 模板，其中包含 src 到 js 脚本。 如何将它们添加到 vue 组件中？

<script type='text/javascript' src='js/library/jquery.min.js'></script>
        <!-- Main Js Plugin -->
<script type='text/javascript' src='js/main.min.js'></script>
        <!-- Theme main js -->
<script type='text/javascript' src='./src/assets/js/custom.theme.js'></script

【问题讨论】：

你可以参考这个。 ***.com/questions/37928998/…

【参考方案1】：

对于 Vue 3：如果脚本将在组件挂载时调用，请在 setup() 函数中添加脚本，这与 Vue 2 的 created 钩子相同。

<script lang="ts">
import  defineComponent  from 'vue';

export default defineComponent(
  name: 'ExampleComponent',
  components: ,
  props: ,
  setup() 
    const googleSignInScript = document.createElement('script');
      googleSignInScript.setAttribute(
        'src',
        'https://accounts.google.com/gsi/client'
      );
      googleSignInScript.setAttribute('async', 'true');
      googleSignInScript.setAttribute('defer', 'true');
      document.head.appendChild(googleSignInScript);

    return ;
  ,
);
</script>

如果脚本将在以后使用，您可以将其添加到 onMounted 钩子中

<script lang="ts">
import  defineComponent, onMounted  from 'vue';

export default defineComponent(
  name: 'ExampleComponent',
  components: ,
  props: ,
  setup() 
    onMounted(() => 
      const googleSignInScript = document.createElement('script');
      googleSignInScript.setAttribute(
        'src',
        'https://accounts.google.com/gsi/client'
      );
      googleSignInScript.setAttribute('async', 'true');
      googleSignInScript.setAttribute('defer', 'true');
      document.head.appendChild(googleSignInScript);
    )
    return ;
  ,
);
</script>

对于 Vue 2：在 created 或 mounted 挂钩中添加适合您的应用程序的脚本。