WXT浏览器插件开发中文教程(9)----WXT配置详解之Vite配置

倔强青铜三2025-03-29 15:26

前言

大家好，我是倔强青铜三 。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

Vite

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

此页面解释了如何自定义项目的 Vite 配置。请参考 Vite 的文档以了解更多信息，关于如何配置打包工具。

提示

在大多数情况下，您不应更改 Vite 的构建设置。WXT 提供了合理的默认值，这些默认值在发布时会被所有商店接受为有效的扩展。

修改 Vite 配置

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

wxt.config.ts

ts 复制代码

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

添加 Vite 插件

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

wxt.config.ts

ts 复制代码

import { defineConfig } from 'wxt';
import VueRouter from 'unplugin-vue-router/vite';
export default defineConfig({
  vite: () => ({
    plugins: [
      VueRouter({
        /* ... */
      }),
    ],
  }),
});

警告

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

wxt.config.ts

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 Issues 中搜索。

如果您的插件没有相关问题，请新建一个。

最后感谢阅读！欢迎关注我，微信公众号 ：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！