如何控制Vue.js应用中TypeScript执行顺序，让main.ts优先运行？

问题本质是模块导入的执行顺序：在ES模块或TypeScript的模块系统中，被导入的模块会先执行其顶级作用域的代码，再执行导入它的模块的代码。如果你的main.ts里直接导入了singletonExample.ts，那singletonExample的顶级代码（比如你写的console.log("single")）会先跑，自然比main.ts的输出早。

下面给两种可行的调整方案：

方案1：动态导入延迟加载单例模块 #

把对单例模块的导入从模块顶部移到main.ts的核心逻辑之后，用动态导入的方式触发加载：

// main.ts
console.log('main');

// 在main执行完成后，再动态加载单例模块
import('./singletonExample').then(() => {
  // 这里可以正常使用单例模块的内容
});

// singletonExample.ts
console.log("single");
// 你的单例类逻辑...

控制台输出顺序会变成：

main
single

方案2：重构单例，延迟初始化逻辑 #

把单例的初始化代码从模块顶级作用域移到类的内部（比如构造函数或初始化方法），只有当主动调用时才执行：

// singletonExample.ts
class SingletonExample {
  private static instance: SingletonExample;

  private constructor() {
    // 初始化逻辑放到构造函数里，只有实例化时才执行
    console.log("single initialized");
  }

  public static getInstance(): SingletonExample {
    if (!SingletonExample.instance) {
      SingletonExample.instance = new SingletonExample();
    }
    return SingletonExample.instance;
  }
}

export default SingletonExample;

// main.ts
console.log('main');
import SingletonExample from './singletonExample';

// 在main执行后，主动获取单例触发初始化
SingletonExample.getInstance();

此时控制台输出顺序：

main
single initialized

关键逻辑说明 #

不管哪种方案，核心都是避免单例模块的顶级代码在main.ts之前执行。要么延迟导入模块，要么把初始化逻辑从模块顶级移到需要时才触发的位置，这样就能保证main.ts的代码先跑完，再处理单例的初始化。

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