SuperAPI AI 工具集

typo3-vite

前端与建站

查看项目

更新于 10-15 21:10

技能介绍

用途:为 TYPO3 v13/v14 LTS sitepackage 提供 Vite 7 构建配置方案,配合 praetorius/vite-asset-collector 使用。资料以 v14.3 LTS 为参考基准(2026-04-21)。TYPO3 v14.0 移除了核心自带的 frontend CSS/JS 拼接、压缩及 CSS 注释与空白剥离(Breaking #108055、#107944),config.concatenateCss/compressCss/concatenateJs/compressJs 不再生效,因此 v14 生产级资源处理需要外部构建工具。

主要能力:采用“每个内容元素一个入口”(entrypoint-per-CE)模式,每个内容元素通过 *.entry.ts 导入自身 SCSS 与 TypeScript,实现代码分割,仅加载可见内容元素的 CSS/JS。Bootstrap 不建议整体导入,只按需导入所用组件(如 bootstrap/scss/grid、bootstrap/scss/buttons)以减小 CSS 体积。内置自定义 SvgCopyOptimizePlugin,将 Resources/Private/Svg/ 中的 SVG 经 SVGO 处理后输出到 Resources/Public/Svg/,并在开发模式监听文件。通过 vite:asset ViewHelper 加载的资源会自动附加 nonce 属性以符合 CSP,无需内联 script/style 标签。技术栈还包括 Bootstrap 5.3+ 主题定制、PostCSS(autoprefixer 与生产环境 cssnano)、SCSS 现代编译器 API(api: 'modern-compiler')、生产环境 Gzip 与 Brotli 压缩,包管理器支持 npm、pnpm 或 yarn。

使用方式与限制:开发服务器默认启用 host 头校验,若未在 server 块设置 allowedHosts: true 与 cors: true,非 localhost 的 host 头会返回 HTTP 403 “Blocked request”,导致反向代理(Traefik、nginx)后的 HMR 失效;这两个选项须写入同一个既有 server 块,重复声明 server 会静默覆盖。构建后需执行 vendor/bin/typo3 cache:flush,否则页面缓存仍输出旧哈希文件名,浏览器对 main.entry-<oldhash>.js 返回 404,表现为页面正常渲染但无 JS/CSS。参考资料包括 references/vite-configuration.md(vite.config.ts、入口、SVG 插件、CSP)、references/scss-architecture.md(SCSS 结构、导入链、命名、CSS 单位)、references/bootstrap-theming.md(SCSS 主题、CI 颜色映射、选择性导入)。具体安装命令、收费与价格信息暂未提供。