vue2 如何在.vue文件的methods中动态导入js文件，js文件内有export default 导出，.vue文件导入后执行js文件内的方法

在 Vue2 中，可以在 .vue 文件的 methods 中动态导入 JS 文件并执行其导出的方法。以下是详细实现步骤：

1. 创建被导入的 JS 文件

假设我们有一个 dynamicModule.js 文件，内容如下：

// dynamicModule.js
export default {
  showMessage() {
    alert("动态导入成功！当前时间: " + new Date().toLocaleTimeString());
    return "方法执行完成";
  },
  calculate(a, b) {
    return a + b;
  }
}

2. 在 Vue 组件中动态导入并执行

在 .vue 文件的 methods 中使用动态导入：

<template>
  <div>
    <button @click="loadAndExecute">点击动态加载并执行JS</button>
    <p>结果: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: null
    };
  },
  methods: {
    async loadAndExecute() {
      try {
        // 1. 动态导入JS模块
        const module = await import('@/utils/dynamicModule.js');
        
        // 2. 获取导出的默认对象
        const exportObj = module.default;
        
        // 3. 执行JS文件中的方法
        exportObj.showMessage();
        
        // 4. 执行带返回值的方法
        this.result = `计算结果: ${exportObj.calculate(5, 3)}`;
        
      } catch (error) {
        console.error('模块加载失败:', error);
        this.result = "加载失败";
      }
    }
  }
}
</script>

关键点说明：

1. 动态导入语法：

   const module = await import('路径')
   

   使用 import() 函数（返回 Promise）实现动态加载

2. 访问默认导出：

   const exportObj = module.default;
   

   因为 JS 文件使用 export default 导出，所以需要通过 .default 访问

3. 执行方法：

   exportObj.methodName();
   

   像调用普通对象方法一样调用导出的函数

4. 错误处理： 使用 try/catch 捕获可能的加载失败或执行错误

注意事项：

1. 路径问题：

   • 使用 @ 别名时确保已配置（vue-cli 默认支持）
   • 相对路径示例：'./dynamicModule.js'

2. 构建处理：

   • Webpack 会将动态导入的文件拆分成单独 chunk
   • 文件会按需加载（首次调用时加载）

3. 异步处理：

   • 使用 async/await 或 .then() 处理 Promise
   • 方法会返回 Promise，可在调用处使用 await

4. 方法上下文：

   • 如果 JS 中的方法需要使用 this，确保在导出时绑定正确上下文
   • 推荐在 JS 文件中使用普通函数而非箭头函数

替代方案（直接调用函数）：

如果 JS 文件导出的是函数而非对象：

// dynamicFunction.js
export default function(message) {
  alert(`动态函数: ${message}`);
}

调用方式：

const funcModule = await import('@/utils/dynamicFunction.js');
funcModule.default("Hello Vue2!");

通过这种方式，你可以灵活地在 Vue2 应用中实现按需加载功能模块，优化应用性能。