Vite插件中transform钩子不生效是怎么回事？

你的问题很常见，我来说说可能的原因和解决办法。

transform钩子不触发，最可能的原因是插件配置方式不对或者钩子返回值有问题。

先检查一下你的vite.config.js里是怎么引入插件的：

import { defineConfig } from 'vite'

import myPlugin from './plugins/myPlugin'



export default defineConfig({

  plugins: [myPlugin()]  // 注意这里要调用函数，不是直接传引用

})

如果这里写成了 plugins: [myPlugin] （没加括号），插件根本不会生效。

再说回你的transform钩子代码，有个关键点你可能忽略了：当不需要处理这个文件时，必须返回null，而不是undefined。Vite的transform钩子约定是这样的：

export default function myPlugin() {

  return {

    name: 'my-plugin',

    transform(code, id) {

      // 这里需要加个判断，如果不处理就返回null

      if (!id.endsWith('.vue')) {

        return null  // 关键：返回null表示不处理，让Vite继续用原文件

      }

      

      console.log('transform called', id);

      return {

        code: code.replace(/hello/g, 'hi'),

        map: null  // 如果不需要sourcemap可以传null

      }

    }

  };

}

你原来的代码直接写成了：

transform(code, id) {

  if (id.endsWith('.vue')) {

    return code.replace(/hello/g, 'hi');  // 这里返回的是字符串

  }

  // 没返回值的分支，返回了undefined

}

问题在于：当你return一个字符串时，Vite其实是可以处理的，但更规范的做法是返回对象。而且当文件不是.vue时，你什么都没返回（undefined），Vite可能会觉得这个钩子出了什么问题。

还有一种可能：你的项目是第一次启动，记得重启dev server。Vite的插件有时候热更新不会自动加载新插件。

你检查一下这两点：1. plugins数组里有没有正确调用插件函数 2. transform里对非.vue文件返回null。应该就能解决你的问题了。

这个问题我之前也踩过坑，有几个地方需要排查一下。

首先最常见的问题就是插件有没有正确注册到 vite.config.js 里。你得确认一下配置文件里是不是这样写的：

import { defineConfig } from 'vite';

import myPlugin from './你的插件路径';



export default defineConfig({

  plugins: [

    myPlugin()  // 记得要调用这个函数！

  ]

});

我之前就犯过一个低级错误，直接写 myPlugin 忘了加括号调用，导致插件根本没生效。

另外一个关键问题是，Vite 处理 .vue 文件时，id 参数会带上 query 参数，比如 /src/App.vue?vue&type=template&lang.js 这种格式，所以你的 id.endsWith('.vue') 判断会失败。

我的做法是把判断逻辑改一下，用 includes 或者把 query 参数去掉：

export default function myPlugin() {

  return {

    name: 'my-plugin',

    transform(code, id) {

      // 把 query 参数去掉再判断

      const [pureId] = id.split('?');

      if (pureId.endsWith('.vue')) {

        console.log('transform called', pureId);

        return code.replace(/hello/g, 'hi');

      }

    }

  };

}

还有一点要注意，如果你想在 .vue 文件被 vue 插件解析之前就处理原始内容，可能需要加上 enforce: 'pre' 选项，不然 transform 拿到的可能已经是处理过的代码片段了。

改完之后重启一下开发服务器试试，应该就能看到 console.log 输出了。