我有一个Vue.使用Amazon S3和Cloudflare启动并运行js应用程序.

当我打开索引并浏览到/dashboard时,一切正常.但是,当我直接在新选项卡中打开一个类似dashboard的路由或刷新页面时,S3返回了以下错误:

404 Not Found

Code: NoSuchKey
Message: The specified key does not exist.
Key: unternehmen
RequestId: 6514F8A1F4C29235
HostId: +BVrPLJSGdzSYogzWZ4GMBXkgkdSJWRVJVhcSs4EI/lmMUR422aCtCxpBGU6AMe5VkS1UbEn/Lc=

只要看看问题出在Vue上就知道了.js历史模式:https://router.vuejs.org/de/essentials/history-mode.html

我想用Amazon S3存储桶中的路由规则来解决这个问题.Apache重写规则如何查找S3?

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

try 了以下操作,但无效:

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com</HostName>
      <ReplaceKeyWith>index.html</ReplaceKeyWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

如果我这样做,我只会得到我的页眉和页脚渲染,但没有更多.

非常感谢.

推荐答案

我知道这个答案来得很晚,但如果其他人正在cloudfront中寻找另一种方法来解决这个问题,那么没有必要在s3上创建自定义页面,在找不到页面时重定向用户.可以在cloudfront中为发行版创建自定义错误响应,而不是这样做.

Custom errors

如果找不到文件,这将始终重定向到/index.html,这将触发应用程序路由.

Vue.js相关问答推荐

Vue3:如何在功能组件中重用插槽vnode

如何使用composition api v-model Select 框获取其他JSON 值?

如何通过 setup() 发出多个参数?

在 bootstrap-vue 中渲染自定义样式

查找未销毁的 Vue 组件

从数据库中删除后,Vue.js $remove 不删除元素

将 Vue 应用程序挂载到主 Vue 应用程序的容器中

Vue动态mapGetters

为什么 Vue 路由/Webpack 开发服务器现在在页面刷新时显示无法获取/路径?

如何获取 Vue 路由历史记录?

VueJS 组件中的图像未加载

VueJS 使用 prop 作为数据属性值

基本 vue.js 2 和 vue-resource http 获取变量赋值

Vue JS 在渲染前等待数据

Laravel 和 Vue - handler.call 不是函数

使计算的 Vue 属性依赖于当前时间?

mount() 仅在组件 Vue.js 上运行一次

Vue中的嵌套循环

如何在 Vue 数据对象中运行函数?

在 Vuejs 中全局导入 Axios 方法