vue3 引入外部js

// main.js 或 setup.js

// 引入外部 JS 文件
import './assets/external-script.js';

// 或者使用动态引入
import(/* webpackChunkName: "external-script" */ './assets/external-script.js').then(module => {
  // 在这里可以访问模块中的内容
  module.default();
});

// 如果你希望在全局范围内使用这个外部 JS 文件中的函数或变量，你可以将其挂载到 Vue 实例上
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 假设 external-script.js 中有一个名为 `myExternalFunction` 的函数
import('./assets/external-script.js').then(module => {
  app.config.globalProperties.$myExternalFunction = module.myExternalFunction;
});

app.mount('#app');

解释说明：

1. 静态引入：

   • 使用 import 语句直接引入外部 JS 文件。这种方式适用于在项目构建时就确定的文件。

2. 动态引入：

   • 使用 import() 函数进行动态引入。这种方式适合按需加载，只有当代码执行到该部分时才会加载对应的外部 JS 文件。

3. 全局挂载：

   • 如果外部 JS 文件中定义了一些全局可用的函数或变量，可以通过将它们挂载到 Vue 实例的 globalProperties 上来实现全局访问。

4. 注意事项：

   • 确保外部 JS 文件路径正确，并且文件内容符合 ES 模块规范（即导出内容）。