如何防止 VueRouter 将静态文件的链接视为路由？

Question

我正在使用 Vue3/VueRouter/Vite 渲染托管在 AWS Amplify 上的静态站点。路由运行良好，但有点过于急切，并将

public

中托管的静态文件（在我的例子中为 .zip）的链接视为路由，然后跳转到 404 catch-all 路由。

我对 Vue/VueRouter 之前版本的理解是，您可以使用

<a>

标签而不是

<router-link>

组件来执行 GET 而不是路由器链接，但这就是我正在尝试的，但没有运气。

我仅在远程托管服务器（生产）上使用应用程序时才会遇到此行为。通过 localhost/dev 测试站点的行为符合预期。

我如何指示 VueRouter 获取这些静态文件而不是尝试/失败路由到它们？

重现： 将以下行添加到组件中：

<a target="_blank" href="https://example.com/file.zip">File Download</a>

预期： 单击链接即可下载服务器上的文件。

结果： 单击链接会将您带到

https://example.com/file.zip

作为路线，其中

file.zip

是路线路径。这会导致显示 404 页面。

Answer 1

感谢评论，我找到了 AWS Amplify 的解决方案。

我必须修改默认的重写/重定向规则以包含 .zip 文件：

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

成为：

</^[^.]+$|\.(?!(zip|css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

目标地址为

index.html

，代码为

（重写）