用途
该技能针对 Craft CMS（或任意 Twig/PHP）服务端渲染站点中两类反复出现的前端升级：一是仍停留在 Laravel Mix 或手写 Webpack 的资源管线，二是仍使用 Vue 2 的组件。资料指出 Mix 最后版本为 6.0.49（2022 年 6 月），Laravel 称其为不再积极维护的遗留包；Vue 2 已于 2023 年 12 月 31 日停止支持。该技能提供将站点迁移到 Vite 8 + craft-vite 与 Vue 3 的操作手册，也帮助判断某个组件是否根本不该用 Vue。版本事实以 2026-10-05 为准，对照 npm、Packagist、vite.dev、v3-migration.vuejs.org 与 nystudio107.com/docs/vite 核实。
主要能力
- 提供“仓库需要什么”的快速判断表：出现 webpack.mix.js、mix-manifest.json、Twig 中的 mix() 时替换为 Vite + craft-vite；手写 webpack.config.js 时逐项翻译 loader 与 plugin；craft-vite 在 DDEV 后开发服务器失败时处理 CORS/allowedHosts/端口；package.json 中 vue ^2 时按组件决定迁移或替换。
- 提供“迁移 Vue 还是替换 Vue”的逐组件决策表：开关、手风琴、标签页、移动导航、显示/隐藏建议用原生 HTML 或 Alpine.js；带校验和提交转圈的表格建议 Alpine + 原生约束校验；无框架库的薄封装建议原生 JS 或 Alpine 直接调用；仅渲染服务端数据且不变的建议删除并在 Twig 渲染；带派生计数的列表过滤/排序、多个子组件建议 Vue 3；多个孤岛共享状态（购物车、收藏、认证）建议 Vue 3 + Pinia；区块内路由（多步工具、仪表盘）建议 Vue 3（+ vue-router）；基于无 Vue 3 版本的 Vue 2 UI 套件则需重写预算。灰色地带经验法则：约 150 行以内且只有一层状态，Alpine 胜出；使用 Vuex、router 或超过两个子组件，Vue 3 胜出。
- 提供两项升级的排序：0 盘点；1 若在 Vue 2.6 则升到 Vue 2.7.16；2 Mix 到 Vite（仍在 Vue 2 时用 Vite 7.3 + @vitejs/plugin-vue2，其 peer 范围截至 2026-10-05 到 vite ^7.0.0）；3 替换不应是 Vue 的组件为 Alpine/原生；4 Vuex 到 Pinia 2（可选，仍在 Vue 2.7；Pinia 3+ 已放弃 Vue 2）；5 Vue 3（Vite 8 上 @vue/compat + @vitejs/plugin-vue，逐步消除警告）；6 移除 compat，然后 Pinia 4，再按分析决定移除 @vitejs/plugin-legacy。站点无 Vue 时跳过 1、3-6，直接到 Vite 8。若 Vue 2 必须先下线，顺序反转：先在 Webpack 上用 @vue/compat 迁到 Vue 3，再到 Vite，但这是更慢的路径。
- 提供 Mix/Webpack 到 Vite 的切换检查清单，从绿色构建分支、记录 parity 基线（各页面类型截图、网络面板 JS/CSS 列表、关键模板的实验室 LCP/CLS/TBT，5 次中位数），到 npm pkg set type="module"、vite.config.js 配置、逐项映射 webpack.mix.js 调用、源码重写（require、require.context、.vue 扩展、process.env、MIX_ 到 VITE_、Sass ~ 导入）、postcss/tailwind 配置、composer require nystudio107/craft-vite、DDEV 端口与 CORS/allowedHosts、Twig 中 mix() 替换为 craft.vite.script(...)、内联脚本修复、图片解析、legacy 构建决策、HMR、CI 构建、parity 检查、部署保留旧构建、后续提交删除旧文件。
- 提供 Vue 2 到 3 的概览：将 vue 别名到 @vue/compat，在 @vitejs/plugin-vue 中设 compatConfig: { MODE: 2 }；将 new Vue({ el }) 逐孤岛移植为 createApp(...).mount(el)；修复编译错误、重命名 transition 类、升级 Vuex/router，再逐个 compat ID 消除运行时警告；全局 MODE: 3、零警告后移除 compat。并指出三个 Twig 站点地雷：inline-template 已移除；移除 compat 会移除模板编译器，@vue/compat 解析为完整构建而普通 vue 为运行时构建，除非将 vue 别名到 vue/dist/vue.esm-bundler.js，否则 in-DOM 孤岛会空白；in-DOM 模板会执行内容中的 {{ }}，存在客户端模板注入风险，带 props 的 SFC 孤岛可避免。
- 提供常见陷阱表：不要在一次部署中同时升级打包器和框架；不要顺手升 Tailwind v4；不要照抄 cors: true / allowedHosts: true；每个孤岛不要各自调用 createPinia()；不要在 Vite 8 上用 @vitejs/plugin-vue2；不要把密钥从 MIX_ 移到 VITE_ 变量（VITE_* 会内联进公开 JS）；不要在切换部署中删除旧 Mix 文件；估算 Vue 3 前先检查插件。
- 提供参考文件：references/mix-webpack-to-vite.md（约 200 行）、references/craft-vite-twig.md（约 220 行）、references/vue2-to-vue3.md（约 190 行）、references/vue-state-and-plugins.md（约 170 行）、references/vue-islands-in-twig.md（约 190 行）。
- 提供陈旧性校验脚本 scripts/check-frontend-upgrade-facts.py 与目录 assets/frontend-upgrade-facts.json：--offline 为结构性检查（PR CI，无网络），--live 为新鲜度检查（npm + Packagist 主版本对比文档主版本，不阻塞 PR）。--live 漂移意味着世界变了，需对照引用来源重新核实并更新 documented_major。
使用方式
资料未提供该技能的具体安装命令或调用方式，仅说明其由 SKILL.md 与 references/ 下的参考文件、scripts/ 下的校验脚本、assets/ 下的目录文件组成。校验脚本用法为：python scripts/check-frontend-upgrade-facts.py --offline（退出码 0 一致，10 漂移）与 python scripts/check-frontend-upgrade-facts.py --live（退出码 10 主版本变动，7 不可达）。
适用场景
适用于 Craft CMS/Twig 服务端渲染站点的前端升级：从 Laravel Mix 或 Webpack 迁移到 Vite + craft-vite，从 Vue 2 迁移到 Vue 3，或判断组件是否应改用 Alpine.js/原生 HTML。也适用于 DDEV 环境下 craft-vite 开发服务器配置、Twig 中的 Vue 孤岛处理、Vuex 到 Pinia 迁移等。
限制
资料未提供该技能的具体安装命令、调用方式、收费或价格信息。版本事实以 2026-10-05 为准，可能随时间变化，需用校验脚本检查。该技能不覆盖稳态 Vue 3（见 vue-ops）与稳态 Craft（见 craftcms-ops）。