feat: 添加video侧边栏
This commit is contained in:
zhongyingmin committed
1 parent
6731cd4f3e
commit
6103453e32
2 files changed
-253
No files matched your search
@@ -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>(<scope>): <subject>`
|
||||
|
||||
**允许的 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 会被阻止，需要修复后重新提交
|
||||
@@ -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
|
||||
<template>
|
||||
<div class="guide-panel" :style="{ backgroundImage: getBackgroundImage('components/box') }">
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getBackgroundImage } from '@/utils'
|
||||
</script>
|
||||
```
|
||||
|
||||
### 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
|
||||
<template>
|
||||
<!-- 方式1：直接使用 -->
|
||||
<img :src="getStaticImage('components/person')" alt="人物" />
|
||||
|
||||
<!-- 方式2：作为背景图片 -->
|
||||
<div :style="{ backgroundImage: getBackgroundImage('home/bg') }"></div>
|
||||
|
||||
<!-- 方式3：通过ImgButton组件 -->
|
||||
<ImgButton :image="IMAGE_PATHS.BUTTONS.CONTINUE" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getStaticImage, getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
</script>
|
||||
```
|
||||
|
||||
### 预定义图片路径常量
|
||||
|
||||
```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`
|
||||
Reference in new issue
Block a user