@xysfe/vite-plugins

Vite 插件合集，提供多环境部署、CDN 域名注入等能力。

📦 包含的插件

| 插件 | 说明 | | --- | --- | | VitePluginMultiOrigin | 多环境 CDN 域名动态注入，通过 PHP 模板变量 {$CDN} 实现运行时动态 CDN 域名 | | VitePluginDevProxy | 开发环境远程代理，自动代理远程 HTML/API、注入本地入口脚本、处理 Cookie/重定向 | | VueCliPluginDevProxy | Vue CLI 版开发代理，功能同上，适配 Vue CLI devServer.proxy |

📦 安装

npm install @xysfe/vite-plugins -D
# or
yarn add @xysfe/vite-plugins -D
# or
pnpm add @xysfe/vite-plugins -D

🚀 使用

import { defineConfig } from 'vite'
import { VitePluginMultiOrigin } from '@xysfe/vite-plugins'

export default defineConfig({
  base: '//sslstatic.xiaoyusan.com/shouhuitech/shouxiaobao',
  plugins: [
    VitePluginMultiOrigin({
      cdnPlaceholder: '{$CDN}',
      regex: ['xiaoyusan.com'],
      shouldCheck: true,
      fixedPublicPath: false,
      debug: true,
    }),
  ],
})

📚 插件配置

VitePluginMultiOrigin

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | cdnPlaceholder | string | '{$CDN}' | PHP 模板变量，服务端渲染时替换为实际 CDN 域名 | | regex | string[] | ['xiaoyusan.com'] | 合规检测正则数组 | | shouldCheck | boolean | true | 是否开启合规检测 | | fixedPublicPath | boolean | false | 保持原 base（dev/SSR 场景） | | monitorInclude | string | '' | 注入 HTML 的 PHP include 片段 | | debug | boolean | false | 调试模式 |

VitePluginDevProxy

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | appHost | string | - | 必填。远程服务器地址，如 'example.com' | | https | boolean | true | 是否使用 HTTPS 协议 | | staticPrefix | string | '/dev/static' | 静态资源路径前缀，必须以 / 开头 | | remotePrefixes | string \| string[] \| Function \| RegExp | ['/static/component'] | 远程资源路径规则 | | clearScriptCssPrefixes | string \| string[] \| Function \| RegExp | '' | 清除远程 HTML 中脚本/样式的规则 | | entry | string \| string[] | '/src/main.js' | 本地入口文件路径 | | developmentAgentOccupancy | string | '' | 自定义占位符，用于替换为入口脚本 | | localIndexHtml | string | '' | 本地 HTML 文件路径（库模式） | | debug | boolean | false | 调试模式 |

VueCliPluginDevProxy

同 VitePluginDevProxy，适配 Vue CLI devServer.proxy，默认 entry 为 ['/js/chunk-vendors.js', '/js/app.js']。

📁 项目结构

src/
├── plugins/
│   ├── multi-origin.ts         # 多 CDN 域名插件
│   └── dev-proxy/              # 开发环境远程代理
│       ├── core.ts             # 核心共享逻辑（类型/工具函数/HTTP处理）
│       ├── vite-cli.ts         # Vite 插件
│       ├── vue-cli-plugin.ts   # Vue CLI 插件
│       └── index.ts            # 子入口
└── index.ts                    # 根入口，re-export 所有插件

新增插件：在 src/plugins/ 下创建文件，在 src/index.ts 中 re-export。

📄 许可证

MIT License © 2024