如何修复 CloudFront 环境中的 vue 路由器问题?

How can I fix vue router issue in a CloudFront environment?

我目前正在开发托管在 S3 上并通过 CloudFront 提供服务的 Vue 2 应用程序。在我的路由模式设置为 history 的情况下,初始部署时工作不正常。

但是,我能够通过向我的 CF 分发添加重定向规则来解决这个问题:

一切正常,但现在由于某种原因停止工作,我尝试访问的所有 pages/paths 都收到了 HTTP 403。当时和现在的唯一区别是我的应用程序有更多 pages/paths。其他一切都没有改变。这是一个示例响应 header:

它很少而且介于两者之间,但有几次我得到 HTTP 404。令人费解的部分是 pages/paths 完全加载,但并非所有样式都得到应用。例如,一个由 12 个句子组成的完全加粗的段落可能只显示 4 个加粗的句子。

最初,我认为 CF 存在问题,但我已经尝试了所有我能想到的方法并与 AWS Support 进行了交谈,但到目前为止没有任何结果。

我的下一个猜测是这可能是路由问题,但我不确定要尝试什么。我过去遇到的路由问题围绕着 pages/paths 根本没有加载,所以这对我来说是一个新领域,我完全不知道从哪里开始我的故障排除工作。

过去有没有人遇到过类似的问题?如果是这样,您是如何解决的?

事实证明,问题源于我设置 Tailwind 的方式。

我没有自己设置,而是指向 Tailwind 的 CDN,问题就解决了。

我使用的 Tailwind 版本有点旧,所以它也可能是依赖性问题。