榆钱落尽槿花稀
2052b40fbc
- 新增`useCdn` composable，用于全局CDN URL管理 - 在`nuxt.config.ts`中配置CDN域名 - 更新图片资源路径，使用CDN URL加载 - 优化页面样式，统一使用SCSS文件 - 删除冗余组件`CdnImageExample.vue` -头部动效增加 -增加返回顶部按钮
34 lines
645 B
TypeScript
34 lines
645 B
TypeScript
import { defineNuxtPlugin } from '#app'
|
|
|
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
const config = useRuntimeConfig()
|
|
|
|
// 定义全局变量
|
|
const cdnUrl = config.public.cdnDomain
|
|
console.log(cdnUrl);
|
|
|
|
// 在客户端注入 CSS 变量
|
|
if (process.client) {
|
|
document.documentElement.style.setProperty('--cdn-domain', cdnUrl)
|
|
}
|
|
|
|
// 只使用一种注入方式
|
|
return {
|
|
provide: {
|
|
cdnUrl
|
|
}
|
|
}
|
|
})
|
|
|
|
// 为了 TypeScript 支持
|
|
declare module '#app' {
|
|
interface NuxtApp {
|
|
$cdnUrl: string
|
|
}
|
|
}
|
|
|
|
declare module '@vue/runtime-core' {
|
|
interface ComponentCustomProperties {
|
|
$cdnUrl: string
|
|
}
|
|
}
|