项目结构

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 生成，包含 TypeScript 配置
• assets/：包含所有需要被 WXT 处理的 CSS、图片和其他资源文件
• components/：默认自动导入，包含 UI 组件
• composables/：默认自动导入，包含项目中用于 Vue 的组合式函数源代码
• entrypoints/：包含所有会被打包到扩展中的入口点
• hooks/：默认自动导入，包含项目中用于 React 和 Solid 的 hooks 源代码
• modules/：包含项目的本地 WXT 模块
• 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/
   📁 modules/
   📁 public/
   📂 src/
      📁 assets/
      📁 components/
      📁 composables/
      📁 entrypoints/
      📁 hooks/
      📁 utils/
      📄 app.config.ts
   📄 .env
   📄 .env.publish
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts

自定义其他目录

你可以配置以下目录：

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

  // 相对于 srcDir
  entrypointsDir: "entries", // 默认值: "entrypoints"
})

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