升级Shopware 6.5.4后热代理无SCSS样式及JS加载异常

• 清除全链路缓存

  1. 执行Shopware控制台命令清理主题缓存：bin/console theme:clear-cache
  2. 进入自定义主题目录，执行前端缓存清理：npm run cache:clear
  3. 手动删除Shopware根目录下var/cache文件夹内的所有内容，确保热代理残留缓存被清空

• 核对热代理配置

  1. 检查.env文件的APP_URL与热代理服务地址一致，比如热代理用http://localhost:8080，则APP_URL需匹配
  2. 打开config/packages/shopware.yaml，确认热代理配置正确：

     theme:
         hot_proxy:
             enabled: true
             url: 'http://localhost:8080'
     

  3. 调整主题的webpack.dev.js，添加CORS兼容配置（6.5版本对跨域校验更严格）：

     devServer: {
         allowedHosts: 'all',
         headers: {
             "Access-Control-Allow-Origin": "*",
             "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
             "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
         }
     }
     

• 重建前端依赖与热代理服务

  1. 进入自定义主题目录，执行npm install重新安装依赖（6.5版本升级了webpack相关依赖，旧依赖可能不兼容）
  2. 重新启动热代理服务：npm run watch，确保启动过程无编译报错

• 排查请求异常细节

  1. 打开浏览器开发者工具的「Network」标签，查看SCSS/JS文件的请求状态：
     • 若为404：检查主题webpack.config.js的publicPath是否与热代理地址一致
     • 若为跨域错误：确认上一步的CORS配置已生效

• 重置主题状态

  1. 进入Shopware后台「设置 > 主题」，切换到默认主题再切回自定义主题，触发主题重新加载

内容的提问来源于stack exchange，提问作者Shad0w