如何在Vue组件中使用动态引入的外部JS文件中的targetData对象？

嘿，这个问题我刚好碰到过，咱们一步步拆解解决哈～

先说说你当前写法的问题 #

你现在用document.createElement('script')加载的example.js里用了export const targetData这种ES模块语法，但直接这么加载的话，浏览器不会把它当成模块处理，而且export的变量也不会自动暴露到全局环境里，所以Vue组件自然拿不到这个变量。

下面给你两种可行的解决方案，按需选就行：

方案1：把外部脚本改成暴露全局变量（最简单的方式） #

不需要改Vue组件的加载逻辑，只需要调整example.js的代码，把变量挂载到window对象上，这样脚本加载完成后就能在全局访问到：

// 修改后的example.js
window.targetData = [1,2,3];

然后在Vue组件里，要等脚本加载完成后再使用这个变量（不然可能脚本还没加载完就去拿，会得到undefined），所以给script加个onload事件监听：

// 在Vue组件的methods或者mounted钩子中写
loadScript() {
  let articleJs = document.createElement('script');
  articleJs.setAttribute('src', 'https://example.js');
  // 监听脚本加载完成事件
  articleJs.onload = () => {
    console.log('脚本加载完成，拿到数据：', window.targetData);
    // 把数据赋值给组件的data变量，方便模板里使用
    this.localTargetData = window.targetData;
  };
  // 可选：监听加载失败的情况
  articleJs.onerror = (err) => {
    console.error('脚本加载失败：', err);
  };
  document.head.appendChild(articleJs);
}

这种方式的优点是简单，不需要额外配置服务器；缺点是会污染全局变量，适合小型项目或者临时场景。

方案2：用动态import()加载ES模块（更规范的方式） #

如果不想污染全局，而且你的服务器支持ES模块加载（需要配置响应头Content-Type: application/javascript或者module，同时跨域的话要做好CORS配置），可以直接用ES6的动态import()来加载模块：

// 在Vue组件的async方法或者async生命周期钩子中使用
async loadModule() {
  try {
    // 动态加载外部模块
    const module = await import('https://example.js');
    console.log('拿到模块数据：', module.targetData);
    // 赋值给组件变量
    this.localTargetData = module.targetData;
  } catch (err) {
    console.error('模块加载失败：', err);
  }
}

然后在mounted钩子中调用这个方法：

async mounted() {
  await this.loadModule();
}

这种方式的优点是符合ES模块规范，不污染全局；缺点是需要服务器支持模块加载，还要处理跨域问题（如果脚本不在你的域名下）。

内容的提问来源于stack exchange，提问作者yuan