Vite

WXT 在幕后使用 Vite 来打包你的扩展。

此页面解释了如何自定义项目中的 Vite 配置。参阅 Vite 的文档 以了解配置打包器的更多信息。

TIP

在大多数情况下，你不需要更改 Vite 的构建设置。WXT 提供默认值，这些默认值输出一个有效的扩展，所有商店都能接受。

更改 Vite 配置

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

// wxt.config.ts
import { defineConfig } from 'wxt';

export default defineConfig({
  vite: () => ({
    // 在 vite.config.ts 文件中相同的位置进行的自定义
    // 修改此处即可
  }),
});

添加 Vite 插件

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

// wxt.config.ts
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 在开发过程中使用了开发服务器和构建，因此你需要手动告诉它何时运行：

// wxt.config.ts
import { defineConfig } from 'wxt';
import removeConsole from 'vite-plugin-remove-console';

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

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

如果你的插件没有问题，打开一个新的问题。