Vue 组件中如何引入外部的js文件 的10种方法

在Vue组件中引入外部JavaScript文件有多种方法，以下是10种常见的方法：

1. 使用<script>标签直接在组件模板中引入。
2. 在组件的mounted钩子中动态创建<script>标签并添加到DOM。
3. 使用Webpack的import()函数进行代码拆分，按需加载外部JS文件。
4. 使用Vue插件系统来集中管理外部JS文件的引入。
5. 使用npm或yarn将JS文件作为依赖安装，然后import到Vue组件中。
6. 在Vue项目的index.html或public/index.html中直接引入。
7. 使用Vue CLI 3+的public/index.html进行静态资源引入。
8. 使用Vue CLI 3+的vue.config.js配置webpack来引入外部JS文件。
9. 使用Vue的render函数返回一个包含外部JS链接的<script>标签。
10. 使用第三方库如loadjs来异步加载JS文件。

以下是每种方法的简单示例代码：

// 方法1: 直接在模板中使用<script>标签
<template>
  <div>
    <script src="https://example.com/external.js"></script>
  </div>
</template>
 
// 方法2: 动态创建<script>标签
<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://example.com/external.js';
    document.body.appendChild(script);
  }
}
</script>
 
// 方法3: 使用import()
<script>
export default {
  mounted() {
    import('https://example.com/external.js')
      .then(module => console.log(module))
      .catch(err => console.error(err));
  }
}
</script>
 
// 方法4: 使用Vue插件
// Vue.js 2.x
Vue.use({
  install(Vue, options) {
    const script = document.createElement('script');
    script.src = 'https://example.com/external.js';
    document.body.appendChild(script);
  }
});
 
// Vue.js 3.x
const MyPlugin = {
  install(app, options) {
    const script = document.createElement('script');
    script.src = 'https://example.com/external.js';
    document.body.appendChild(script);
  }
};
app.use(MyPlugin);
 
// 方法5: npm/yarn安装后import
import externalModule from 'external-module';
 
// 方法6,7,8,9,10: 略，与方法1类似，但是指向本地文件或使用Vue CLI配置。

选择合适的方法取决于具体的应用场景和需求。通常，推荐使用方法5（npm/yarn安装）、方法2（动态创建<script>标签）或者方法10（使用第三方库加载JS文件），以便更好地管理和维护代码。