vue 动态加载js文件

在 Vue 中动态加载 JS 文件可以使用 `Vue.directive` 自定义指令实现。具体实现步骤如下：

1. 在 `main.js` 中注册自定义指令：

Vue.directive('dynamic-script', {
  bind: function(el, binding) {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = binding.value;
    el.appendChild(script);
  }
});

2. 在组件中使用指令：

<template>
  <div v-dynamic-script="yourScriptPath"></div>
</template>

其中，`yourScriptPath` 是你要动态加载的 JS 文件路径。通过指令绑定，当组件被加载时，指令会自动执行 `bind` 方法，创建一个 `<script>` 标签并设置其 `src` 属性为你传入的路径，然后将其添加到组件的 DOM 中，从而实现动态加载 JS 文件。

注意：为了避免重复加载，你可以通过在 `bind` 方法中添加判断逻辑，判断当前组件是否已经加载过该 JS 文件，如果已经加载过，则不需要再次加载。