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

前言

大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播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 中搜索。

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

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

相关推荐
yinuo1 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip2 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈3 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~3 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技013 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio4 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫5 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@5 小时前
前端发送请求时,参数的传递格式
前端
L李什么李5 小时前
HTML——使用表格制作简历
前端·javascript·html
未来之窗软件服务5 小时前
万象EXCEL开发(八)excel公式解析与依赖映射 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel