前言
大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!
项目结构
WXT 遵循严格的项目结构。默认情况下,它是一个扁平的文件夹结构,如下所示:
            
            
              html
              
              
            
          
          📂 {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 文件中启用它:
            
            
              typescript
              
              
            
          
          export default defineConfig({
  srcDir: 'src',
});启用后,项目结构应如下所示:
            
            
              html
              
              
            
          
          📂 {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自定义其他目录
可以配置以下目录:
            
            
              typescript
              
              
            
          
          export default defineConfig({
  // 相对于项目根目录
  srcDir: "src",             // 默认值: "."
  outDir: "dist",            // 默认值: ".output"
  // 相对于 srcDir
  entrypointsDir: "entries", // 默认值: "entrypoints"
  modulesDir: "wxt-modules", // 默认值: "modules"
  publicDir: "static",       // 默认值: "public"
})可以使用绝对路径或相对路径。
最后感谢阅读!欢迎关注我,微信公众号 :
倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!