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

Mr-露露提问于 2026-03-01 17:10:20 阅读 3

工具

我在写一个Vite插件，想用transform钩子处理.vue文件里的内容，但发现根本没进这个函数。配置也加了，路径也对，就是不触发，到底哪里出问题了？

这是我的插件代码：

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      console.log('transform called', id); // 这行完全没打印
      if (id.endsWith('.vue')) {
        return code.replace(/hello/g, 'hi');
      }
    }
  };
}

我来解答赞 3 收藏

反馈

1 条解答

设计师俊熙 Lv1

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

首先最常见的问题就是插件有没有正确注册到 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 输出了。

2026-03-01 17:11