Vue3 动态引入 JavaScript 文件 - 详细教程

在 Vue3 中，可以使用 import() 方法来动态引入 JavaScript 文件。

示例代码：

import { ref } from 'vue'

export default {
  setup() {
    const dynamicScriptLoaded = ref(false)

    const loadDynamicScript = async () => {
      try {
        const dynamicScript = await import('./path/to/dynamic/script.js')
        // do something with dynamicScript
        dynamicScriptLoaded.value = true
      } catch (error) {
        console.error('Failed to load dynamic script:', error)
      }
    }

    return {
      dynamicScriptLoaded,
      loadDynamicScript
    }
  }
}

在上述示例中，我们使用了 import('./path/to/dynamic/script.js') 来动态引入 JavaScript 文件，并在 loadDynamicScript 函数中调用。如果引入成功，就可以对动态引入的脚本进行操作。如果引入失败，则会在控制台输出错误信息。

在模板中，我们可以使用 v-if 来根据 dynamicScriptLoaded 的值来决定是否渲染需要用到动态脚本的组件或元素。例如：

<template>
  <div>
    <div v-if='dynamicScriptLoaded'>
      <!-- this component needs the dynamic script -->
      <DynamicComponent />
    </div>
    <button @click='loadDynamicScript'>Load Dynamic Script</button>
  </div>
</template>