fangyi-layer-core

一个用于 Nuxt 4 的媒体资源 layer，提供路径映射与 CDN URL 生成能力。

安装

pnpm add fangyi-layer-core

主工程配置（nuxt.config.ts）

在主工程 nuxt.config.ts 中通过 extends 引入 layer，并通过 mediaLayer 配置默认 CDN 与路径映射。

export default defineNuxtConfig({
  extends: ["fangyi-layer-core"],

  mediaLayer: {
    defaultCdnBase: "https://cdn.example.com",
    pathMap: [
      { from: "/images/webp2/", to: "/assets/images/webp/" },
      { from: "/images/", to: "/assets/images/" },
      { from: "/video/", to: "/assets/video/" },
    ],
  },

  runtimeConfig: {
    public: {
      mediaCdn: process.env.NUXT_PUBLIC_MEDIA_CDN || "",
    },
  },
});

环境变量说明（runtimeConfig.public.mediaCdn）

runtimeConfig.public.mediaCdn 建议通过环境变量注入：

process.env.NUXT_PUBLIC_MEDIA_CDN;

当该值非空时，会优先作为最终 CDN 基础地址。

useMediaCdn 用法

const { getImageUrl, getVideoUrl, transformPath } = useMediaCdn();

const imageUrl = getImageUrl("/images/webp2/a.webp");
// 可能输出：https://cdn.example.com/assets/images/webp/a.webp

const videoUrl = getVideoUrl("/video/demo.mp4");
// 可能输出：https://cdn.example.com/assets/video/demo.mp4

const mappedPath = transformPath("/images/webp2/c.webp");
// 输出：/assets/images/webp/c.webp

说明：

• getImageUrl / getVideoUrl 会执行路径映射，并在有 CDN 基础地址时拼接完整 URL。
• transformPath 只做路径映射，不拼接 CDN 域名。

默认 pathMap 规则

未显式配置 mediaLayer.pathMap 时，默认使用以下三条规则：

[
  { from: "/images/webp2/", to: "/assets/images/webp/" },
  { from: "/images/", to: "/assets/images/" },
  { from: "/video/", to: "/assets/video/" },
];

mediaCdn 与 defaultCdnBase 优先级

最终 CDN 基础地址计算规则：

cdnBase = mediaCdn 非空 ? mediaCdn : defaultCdnBase

即：

• mediaCdn：运行时覆盖值（优先级高，适合按环境切换）。
• defaultCdnBase：layer 默认值或主工程 mediaLayer 配置值（兜底）。