接上 Vite：插件与构建定制

WXT 底层用 Vite 打包扩展。这一章只讲「在 WXT 里怎么用 Vite」，Vite 本身的配置项怎么调，请查阅 Vite 官方文档。

先记住一句忠告

大多数情况下，别动 Vite 的构建设置。WXT 提供的默认配置已经能产出所有商店都接受的合法扩展，乱改反而容易弄出审核问题。需要定制时再往下看。

在 wxt.config.ts 里覆盖 Vite 配置

WXT 没有独立的 vite.config.ts，一切都在 wxt.config.ts 的 vite 字段里完成：

import { defineConfig } from 'wxt';

export default defineConfig({
  vite: () => ({
    // 这里写的内容和 vite.config.ts 里 defineConfig({ ... }) 一样
  }),
});

vite 字段是函数形式，接收 Vite 的环境信息，返回覆盖配置。这样写是为了让 WXT 能在不同阶段生成不同的 Vite 配置。

添加 Vite 插件

流程很简单：先装包，再加进 plugins 数组。比如给 Vue 项目加路由插件：

import { defineConfig } from 'wxt';
import VueRouter from 'unplugin-vue-router/vite';

export default defineConfig({
  vite: () => ({
    plugins: [
      VueRouter({
        /* 插件选项 */
      }),
    ],
  }),
});

mkext 用 Tailwind CSS v4 的官方插件，写法一样：

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: () => ({
    plugins: [tailwindcss()],
  }),
});

插件的坑：开发模式也是构建

WXT 对构建的编排方式和普通 Vite 项目不同，某些插件会因此表现异常。典型的例子是 vite-plugin-remove-console：它本应在生产构建时移除 console.log，但 WXT 开发阶段也会走构建流程，所以你得手动告诉它什么时候干活：

import { defineConfig } from 'wxt';
import removeConsole from 'vite-plugin-remove-console';

export default defineConfig({
  vite: (configEnv) => ({
    plugins:
      configEnv.mode === 'production'
        ? [removeConsole({ includes: ['log'] })]
        : [],
  }),
});

用 configEnv.mode 判断当前模式，生产才挂插件，开发就留空。碰到插件不生效，先去 GitHub 的 wxt 仓库 issues 搜 vite plugin 标签，多半有人踩过；没有就先搜，再不行就提新 issue。

真实案例：扩展页面的构建调优

mkext 在 vite 里做了两件事，都有明确原因：

vite: () => ({
  build: {
    modulePreload: false,
  },
  plugins: [tailwindcss()],
});

modulePreload: false 是因为扩展页面会拒绝 Vite 的跨 world 的 modulepreload 预加载提示。扩展页面本身很小，用浏览器原生模块加载更稳妥，省得生成一堆没人用的预加载链接。这个案例说明：覆盖构建配置前，先搞清楚 WXT 与普通 Web 项目的差异。

什么时候才需要动 build 配置

把「别动默认值」和上面的案例放在一起看，规律就出来了：改 build 配置，都是为了解决具体问题——产物被浏览器拒绝、体积超标、资源处理方式不对。判断标准很简单：没有明确问题就不改；有明确问题，先确认它出在 Vite 层，再动手。

排查插件问题时也按同样思路：先在普通 Vite 项目里验证插件本身能用，排除插件自己的配置错误；再检查是不是 WXT 的编排方式导致的（比如开发模式也走构建）；最后带着最小复现去 WXT 仓库搜 issue，搜不到再开新 issue。

与框架模块的分工

前面 §24 提到，React、Vue、Svelte 等框架通过 @wxt-dev/module-react、@wxt-dev/module-vue 这类模块接入。框架模块内部本身就帮你配置好了对应的 Vite 插件，你不需要重复添加。比如 wxt-nuxt-ui-starter 项目，框架部分交给模块，UI 库的插件才手动挂：

import { defineConfig } from 'wxt';
import ui from '@nuxt/ui/vite';

export default defineConfig({
  modules: ['@wxt-dev/module-vue'],
  vite: () => ({
    plugins: [ui({ ui: { colors: { neutral: 'neutral' } } })],
  }),
});

小结

• vite 配置字段按 Vite 的写法挂插件，Tailwind 等就是这么接的。
• 分工口诀：框架能力走模块，单点功能走插件。
• 别动默认构建设置；需要生命周期能力时，优先考虑模块（§31）。