Webpack Encore 在 Symfony 5 中默认不启用 HMR、不兼容 Vue 3 且不自动集成 Tailwind CSS，必须显式调用 .enableHotModuleReplacement()（在 .enableVueLoader() 之后）、使用 npx encore dev-server 启动开发服务、配置 content 路径覆盖源码与模板、确保 PostCSS 插件顺序为 [tailwindcss, autoprefixer]，并禁用 css-loader 模块化以支持 @apply。
Webpack Encore 在 Symfony 5 中默认不启用 HMR，也不自动适配 Vue 3 或 Tailwind CSS —— 你得手动打开开关、校准路径、绕开 loader 版本陷阱，否则打包能跑，但热更新失效、样式丢失、Vue 报错都是静默发生的。
如何让 encore dev-server 正确启动并启用 HMR
开发时必须用 encore dev-server，而不是 npm run watch 或 symfony server:start。后者只提供静态文件服务，完全不支持模块热替换。
-
npm run dev-server（或npx encore dev-server）是唯一触发 HMR 的命令 - 必须在
webpack.config.js中显式调用.enableHotModuleReplacement()，且要放在.enableVueLoader()之后 - 确保
index.html或 Twig 模板中脚本标签指向http://localhost:8080（默认端口），不是/build/下的静态路径 - 如果用了 Twig，改用
{{ encore_entry_script_tags('app') }}，它会自动注入 dev-server 的 script 标签
为什么 enableVueLoader() 不等于 Vue 3 支持
Encore.enableVueLoader() 默认加载 vue-loader v15，只兼容 Vue 2.6–2.7。遇到 createApp() 就会静默失败，控制台可能只报 “Uncaught ReferenceError: createApp is not defined” 或响应式不生效。
- 正确写法是：
Encore.enableVueLoader(() => {}, { version: 3 })，强制启用 vue-loader v16 - 同时确认
package.json中"vue"版本锁定为"^3.4.0"，避免插件拉低版本 - 入口文件
assets/js/app.js必须用createApp(App).mount('#app')，删掉所有new Vue()和全局Vue.use() -
public/index.html中必须存在<div id="app"></div>，否则 mount 失败无提示
如何让 asset() 正确解析带哈希的构建路径
Symfony 的 asset() 函数不直接读文件系统，而是查 manifest.json 映射表。开发时 npm run watch 不生成该文件，所以必须靠 dev-server 内存服务动态映射；生产则依赖构建后生成的 public/build/manifest.json。
-
Encore.setPublicPath('/build')的值必须与 Twig 中asset()的 base 路径一致：比如写{{ asset('js/app.js') }}，就要求最终 URL 是/build/js/app.a1b2c3.js - 部署到子目录（如
https://example.com/myapp/）时，setPublicPath()得设成/myapp/build，否则所有资源 404 - 检查
public/build/manifest.json是否存在 —— 它只在npx encore production后生成；开发阶段靠 dev-server 自动代理
Tailwind CSS 类名不生效？先查 content 和 PostCSS 插件顺序
Tailwind 扫不到 Vue 组件里的类名，通常不是配置漏了，而是 content 路径没覆盖真实 import 链路，或者 PostCSS 插件顺序错了 —— tailwindcss 必须排在 autoprefixer 前面，否则 @apply 规则被丢弃。
-
tailwind.config.js的content数组要显式列出所有源码路径：["./assets/**/*.{vue,js,ts}", "./templates/**/*.html"]，别只写**/*.vue - 禁用
css-loader的模块化（modules: false），否则@apply生成的类名会被作用域隔离 - PostCSS 插件必须按顺序传入：
[require('tailwindcss'), require('autoprefixer')]，不能靠postcss.config.js—— Encore 默认忽略它 - 热更新失效时，尝试禁用
cache-loader或在 Webpack 5 中配置watchOptions: { followSymlinks: true }监听tailwind.config.js
最常被跳过的点：HMR 开了，Vue 版本对了，路径也设了，但组件里改了模板，浏览器还是整页刷新 —— 这说明 vue-hot-reload-api 没注入成功，往往是因为 dev-server 和 Symfony 服务器同时运行，或者 encore_entry_script_tags() 没生效，导致 HMR runtime 根本没加载。
