From 6103453e324e833e11405c630325a04246748930 Mon Sep 17 00:00:00 2001 From: zhongyingmin <554844230@qq.com> Date: Fri, 26 Sep 2025 00:13:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0video=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HUSKY_SETUP.md | 86 --------------------- IMAGE_PATH_SOLUTION.md | 167 ----------------------------------------- 2 files changed, 253 deletions(-) delete mode 100644 HUSKY_SETUP.md delete mode 100644 IMAGE_PATH_SOLUTION.md diff --git a/HUSKY_SETUP.md b/HUSKY_SETUP.md deleted file mode 100644 index 21a3f72..0000000 --- a/HUSKY_SETUP.md +++ /dev/null @@ -1,86 +0,0 @@ -# Husky 配置说明 - -## 已安装的依赖 - -- `husky`: Git hooks 管理工具 -- `lint-staged`: 对暂存文件运行 linters -- `@commitlint/cli`: Commit 信息验证工具 -- `@commitlint/config-conventional`: 约定式提交规范 - -## 配置内容 - -### 1. Pre-commit 钩子 - -在每次 commit 前自动执行： - -- ESLint 检查和自动修复 -- Prettier 代码格式化 - -### 2. Commit-msg 钩子 - -验证 commit 信息格式，必须符合约定式提交规范： - -**格式**: `(): ` - -**允许的 type 类型**: - -- `feat`: 新功能 -- `fix`: 修复 bug -- `docs`: 文档更新 -- `style`: 代码格式调整 -- `refactor`: 代码重构 -- `perf`: 性能优化 -- `test`: 测试相关 -- `build`: 构建相关 -- `ci`: CI/CD 相关 -- `chore`: 其他杂务 -- `revert`: 回滚提交 - -**规则**: - -- subject 最大长度: 50 字符 -- body 每行最大长度: 100 字符 -- subject 不能使用句首大写、帕斯卡命名等格式 - -### 3. Prettier 配置 - -已创建 `.prettierrc` 配置文件，统一代码格式： - -- 不使用分号 -- 使用单引号 -- 缩进 2 个空格 -- 行宽限制 100 字符 -- 不使用尾随逗号 - -## 使用方法 - -### 正常提交 - -```bash -git add . -git commit -m "feat: 添加新功能" -``` - -### 如果 commit 信息不符合规范 - -```bash -git commit -m "invalid message" -# 会提示错误并要求修改 -``` - -### 手动运行检查 - -```bash -# 检查代码格式 -npx lint-staged - -# 检查 commit 信息 -echo "feat: 测试" | npx commitlint -``` - -## 注意事项 - -1. 确保使用 `nvm use 22.14` 切换到正确的 Node.js 版本 -2. 使用 `pnpm` 作为包管理器 -3. 所有代码在提交前会自动进行格式化和检查 -4. 如果检查失败，commit 会被阻止，需要修复后重新提交 diff --git a/IMAGE_PATH_SOLUTION.md b/IMAGE_PATH_SOLUTION.md deleted file mode 100644 index 5e69f66..0000000 --- a/IMAGE_PATH_SOLUTION.md +++ /dev/null @@ -1,167 +0,0 @@ -# 图片路径构建后访问解决方案 - -## 问题描述 - -在Vue 3 + Vite + TypeScript项目中，图片资源在开发环境正常显示，但构建后无法正常访问。主要问题包括： - -1. CSS中的相对路径 `url('../../assets/images/xxx.png')` 在构建后无法正确解析 -2. 动态生成的图片路径无法被Vite静态分析，导致图片未被包含在构建中 -3. 环境变量判断逻辑不正确 - -## 解决方案 - -### 1. 使用 `import.meta.glob` 静态导入所有图片 - -```typescript -// src/utils/index.ts -const imageModules = import.meta.glob('../assets/images/**/*.{png,jpg,jpeg,gif,svg,webp}', { - eager: true -}) - -export const getStaticImage = (path: string) => { - try { - const imagePath = - path.endsWith('.png') || - path.endsWith('.jpg') || - path.endsWith('.jpeg') || - path.endsWith('.gif') || - path.endsWith('.svg') || - path.endsWith('.webp') - ? `../assets/images/${path}` - : `../assets/images/${path}.png` - - const module = imageModules[imagePath] - if (module && typeof module === 'object' && 'default' in module) { - return module.default as string - } - - return new URL(imagePath, import.meta.url).href - } catch (error) { - console.error('Failed to load image:', path, error) - return '' - } -} -``` - -### 2. 修复CSS中的图片路径 - -**之前（错误）：** - -```css -.guide-panel { - background-image: url('../../assets/images/components/box.png'); -} -``` - -**之后（正确）：** - -```vue - - - -``` - -### 3. 优化Vite构建配置 - -```typescript -// vite.config.ts -export default defineConfig(({ mode }) => { - return { - // ... 其他配置 - build: { - assetsDir: 'assets', - rollupOptions: { - output: { - assetFileNames: assetInfo => { - if (/\.(png|jpe?g|gif|svg|webp)$/i.test(assetInfo.name || '')) { - return `assets/images/[name]-[hash][extname]` - } - return `assets/[name]-[hash][extname]` - } - } - } - } - } -}) -``` - -## 关键改进点 - -### 1. 静态分析支持 - -- 使用 `import.meta.glob` 确保Vite能够静态分析所有图片资源 -- 所有图片在构建时被正确包含和处理 - -### 2. 路径统一管理 - -- 通过 `getStaticImage` 函数统一管理图片路径 -- 支持带扩展名和不带扩展名的路径 -- 提供错误处理和回退机制 - -### 3. 构建优化 - -- 图片资源统一放置在 `assets/images/` 目录 -- 文件名包含hash值，支持缓存优化 -- 构建后路径结构清晰 - -## 使用方式 - -### 在组件中使用图片 - -```vue - - - -``` - -### 预定义图片路径常量 - -```typescript -export const IMAGE_PATHS = { - HOME_BG: 'home/guide/bg', - ACTION_BG: 'home/action/bg', - GUIDE_PERSON: 'components/person', - BUTTONS: { - CONTINUE: 'components/continue', - ESCAPE: 'components/escape' - } -} as const -``` - -## 验证结果 - -构建后验证： - -- ✅ 所有图片资源正确包含在 `dist/assets/images/` 目录 -- ✅ 图片路径在构建后正确解析 -- ✅ 预览服务器中图片正常访问 -- ✅ 支持hash文件名，便于缓存管理 - -## 注意事项 - -1. **不要将图片放在 `public` 目录**：这会导致图片不被编译和优化 -2. **使用统一的图片管理函数**：避免直接使用相对路径 -3. **确保图片文件存在**：构建时会检查所有引用的图片 -4. **支持多种图片格式**：png, jpg, jpeg, gif, svg, webp - -## 相关文件 - -- 图片处理工具：`src/utils/index.ts` -- Vite配置：`vite.config.ts` -- 组件示例：`src/components/Guide/GuideDragon.vue` -- 按钮组件：`src/components/Button/ImgButton.vue`