WXT浏览器开发中文教程(2)----WXT项目目录结构详解

前言

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

项目结构

WXT 遵循严格的项目结构。默认情况下，它是一个扁平的文件夹结构，如下所示：

📂 {rootDir}/
   📁 .output/
   📁 .wxt/
   📁 assets/
   📁 components/
   📁 composables/
   📁 entrypoints/
   📁 hooks/
   📁 modules/
   📁 public/
   📁 utils/
   📄 .env
   📄 .env.publish
   📄 app.config.ts
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts

以下是这些文件和目录的简要说明：

• .output/: 所有构建文件都将放在这里
• .wxt/: 由 WXT 生成，包含 TS 配置
• assets/: 包含所有应由 WXT 处理的 CSS、图像和其他资源
• components/: 默认自动导入，包含 UI 组件
• composables/: 默认自动导入，包含 Vue 的可组合函数
• entrypoints/: 包含所有将被打包到扩展中的入口点
• hooks/: 默认自动导入，包含 React 和 Solid 的钩子
• public/: 包含任何希望直接复制到输出文件夹而不被 WXT 处理的文件
• utils/: 默认自动导入，包含项目中通用的实用程序
• .env: 包含环境变量
• .env.publish: 包含发布的环境变量
• app.config.ts: 包含运行时配置
• package.json: 你的包管理器使用的标准文件
• tsconfig.json: 告诉 TypeScript 如何行为的配置
• web-ext.config.ts: 配置浏览器启动
• wxt.config.ts: WXT 项目的主配置文件

添加 src/ 目录

许多开发者喜欢有一个 src/ 目录来分离源代码和配置文件。可以在 wxt.config.ts 文件中启用它：

export default defineConfig({
  srcDir: 'src',
});

启用后，项目结构应如下所示：

📂 {rootDir}/
   📁 .output/
   📁 .wxt/
   📂 src/
      📁 assets/
      📁 components/
      📁 composables/
      📁 entrypoints/
      📁 hooks/
      📁 modules/
      📁 public/
      📁 utils/
      📄 app.config.ts
   📄 .env
   📄 .env.publish
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts

自定义其他目录

可以配置以下目录：

export default defineConfig({
  // 相对于项目根目录
  srcDir: "src",             // 默认值: "."
  outDir: "dist",            // 默认值: ".output"
  // 相对于 srcDir
  entrypointsDir: "entries", // 默认值: "entrypoints"
  modulesDir: "wxt-modules", // 默认值: "modules"
  publicDir: "static",       // 默认值: "public"
})

可以使用绝对路径或相对路径。

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