如何通过Vite配置插件自定义logger？为何插件中配置不生效？

问题根源 #

Vite的customLogger配置项的初始化时机早于插件的config钩子执行时机：

• Vite启动时，会优先读取用户配置文件（如vite.config.ts）的顶层配置，用其中的customLogger创建全局logger实例。
• 完成logger初始化后，才会加载并执行所有插件的config钩子，此时返回的customLogger配置不会被Vite用来重新创建logger，自然无法生效。
• 而直接在用户配置文件里设置customLogger，是在Vite初始化logger前被读取，所以能正常生效。

替代解决方案 #

如果要在插件中自定义日志行为，不需要通过config钩子返回customLogger，而是直接修改Vite已经创建好的logger实例。可以在configResolved钩子中操作（该钩子在所有配置解析完成后执行，此时logger实例已存在）：

export default function plugin(opts: PluginOptions): Plugin {
  return {
    name: 'vite-plugin',
    enforce: 'pre',
    configResolved(config) {
      // 保存原始的info方法
      const originalInfo = config.logger.info;
      // 覆盖自定义逻辑
      config.logger.info = (msg: string, options?: LogOptions) => {
        originalInfo(msg.replace('A', 'B'), options);
      };
    },
  };
}

这种方式直接修改已在使用的logger实例的方法，后续Vite输出日志时就会执行你自定义的逻辑。

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