58 lines
1.6 KiB
Markdown
58 lines
1.6 KiB
Markdown
|
# 灵睿官网3.0 - CDN图片处理指南
|
|||
|
|
|
|||
|
|
## 静态生成模式下的CDN图片处理
|
|||
|
|
|
|||
|
|
本项目已配置为支持在使用 `nuxt generate` 静态生成模式下自动处理图片CDN路径。以下是相关功能和使用方法的说明。
|
|||
|
|
|
|||
|
|
### 配置说明
|
|||
|
|
|
|||
|
|
1. CDN基础URL已配置为 `https://cdn.web.0rui.cn/`
|
|||
|
|
2. 在 `nuxt.config.ts` 中已添加相关配置
|
|||
|
|
3. 创建了专用的CDN图片处理插件和组件
|
|||
|
|
|
|||
|
|
### 使用方法
|
|||
|
|
|
|||
|
|
#### 方法一：使用CdnImage组件（推荐）
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<!-- 使用CdnImage组件自动处理CDN路径 -->
|
|||
|
|
<CdnImage src="public/img/logo.png" class="image_1" referrerpolicy="no-referrer" />
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 方法二：使用全局$cdnImage方法
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<img :src="$cdnImage('public/img/logo.png')" class="image_1" referrerpolicy="no-referrer" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
const { $cdnImage } = useNuxtApp()
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 路径处理规则
|
|||
|
|
|
|||
|
|
- 以 `public/` 开头的路径会自动转换为 `https://cdn.web.0rui.cn/img/...`
|
|||
|
|
- 已经是完整URL的路径（以http://或https://开头）不会被修改
|
|||
|
|
- 其他路径会直接拼接CDN基础URL
|
|||
|
|
|
|||
|
|
### 开发与生产环境
|
|||
|
|
|
|||
|
|
- 在开发环境中，默认使用本地路径，不进行CDN转换
|
|||
|
|
- 在生产环境（静态生成）中，自动应用CDN路径
|
|||
|
|
- 如需在开发环境中测试CDN路径，可以使用 `<CdnImage src="..." :forceCdn="true" />` 强制启用CDN
|
|||
|
|
|
|||
|
|
### 静态生成命令
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 生成静态网站
|
|||
|
|
npm run generate
|
|||
|
|
|
|||
|
|
# 预览生成的静态网站
|
|||
|
|
npm run preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
生成的静态文件将位于 `.output/public` 目录中，可以部署到任何静态文件服务器。
|