使用Amplify部署Quasar应用新版本后/vendor.js报403错误求助

核心原因分析 #

这个问题本质是静态资源缓存与部署后文件变更的冲突：旧版本的vendor.js被浏览器/CDN缓存，部署新版本后，Amplify存储中旧的vendor.js可能被替换或删除，导致缓存的请求路径返回403，清除缓存后才会拉取新的文件。

解决方案 #

1. 确保Quasar生成带哈希的静态资源文件名 #

Quasar默认开启文件名哈希，但如果被手动关闭，会导致每次部署的vendor.js文件名一致，引发缓存冲突。

• 打开项目根目录的quasar.conf.js
• 找到build配置段，确认filenameHashing设为true：

build: {
  filenameHashing: true,
  // 其他配置...
}

重新build部署后，vendor.js会变成类似vendor.7a2b3c.js的带哈希文件名，彻底避免缓存路径冲突。

2. 调整Amplify的缓存规则 #

如果无法修改Quasar的文件名策略，可通过Amplify的缓存配置，控制vendor.js的缓存行为，减少缓存过期导致的403：

• 在项目根目录的amplify.yml中，添加customHeaders配置：

frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist/spa # 根据你的Quasar构建输出目录调整
    files:
      - '**/*'
  customHeaders:
    - pattern: '/vendor.js'
      headers:
        - key: Cache-Control
          value: 'public, max-age=86400, stale-while-revalidate=604800'

这个配置让浏览器缓存vendor.js1天，同时在缓存过期时，先返回旧缓存再后台拉取新文件，避免403报错。

3. 部署后手动刷新Amplify缓存 #

如果上述配置都无法立即生效，可在每次部署完成后，手动触发Amplify的缓存刷新：

• 登录AWS Amplify控制台，找到你的应用
• 进入App settings > Hosting > Cache management
• 点击Create cache invalidation，输入/*或/vendor.js来刷新对应路径的缓存

4. 检查Amplify部署的文件清理策略 #

部分情况下，Amplify部署不会自动清理旧的静态资源，但如果新版本覆盖了同名文件，可能存在缓存同步问题。可在amplify.yml中确保部署时完整替换所有文件：

artifacts:
  baseDirectory: dist/spa
  files:
    - '**/*'

这个配置会将构建输出的所有文件上传到Amplify，覆盖旧文件。

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