Vite

WXT 在底层使用 Vite 来打包你的扩展。

本页说明如何自定义项目的 Vite 配置。请参阅 Vite 的文档 了解更多关于配置打包工具的信息。

TIP

在大多数情况下，你不需要修改 Vite 的构建设置。WXT 提供了合理的默认值，输出的扩展在发布时可以被所有商店接受。

修改 Vite 配置

你可以通过 wxt.config.ts 文件修改 Vite 的配置：

import { defineConfig } from 'wxt';

export default defineConfig({
  vite: () => ({
    // 在这里覆盖配置，与 vite.config.ts 文件中的
    // `defineConfig({ ... })` 相同
  }),
});

添加 Vite 插件

要添加插件，请安装对应的 NPM 包并将其添加到 Vite 配置中：

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

export default defineConfig({
  vite: () => ({
    plugins: [
      VueRouter({
        /* ... */
      }),
    ],
  }),
});

WARNING

由于 WXT 编排 Vite 构建的方式，某些插件可能无法按预期工作。例如，vite-plugin-remove-console 通常只在生产环境构建时运行（vite build）。然而，WXT 在开发过程中同时使用开发服务器和构建，因此你需要手动指定它何时运行：

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

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

如果你在使用特定插件时遇到问题，请搜索 GitHub issues。

如果你的插件没有对应的 issue，请创建一个新的。