title: Vue.js Router: history mode and AWS S3 (RoutingRules)
body: <p>I have a Vue.js application up and running with Amazon S3 and Cloudflare.</p>
  
  <p>When I open the index and browse to /dashboard, everything works fine. But when I open a route like dashboard directly in a new tab or refresh the page, I get the following error back from S3:</p>
  
  <pre><code>404 Not Found
  
  Code: NoSuchKey
  Message: The specified key does not exist.
  Key: unternehmen
  RequestId: 6514F8A1F4C29235
  HostId: +BVrPLJSGdzSYogzWZ4GMBXkgkdSJWRVJVhcSs4EI/lmMUR422aCtCxpBGU6AMe5VkS1UbEn/Lc=
  </code></pre>
  
  <p>Just read that the problem is Vue.js history mode: <a href="https://router.vuejs.org/de/essentials/history-mode.html" rel="noreferrer">https://router.vuejs.org/de/essentials/history-mode.html</a></p>
  
  <p>I would like to solve the problem with a routing rule in my Amazon S3 Bucket. How would the Apache RewriteRule look for S3?</p>
  
  <pre><code>&lt;IfModule mod_rewrite.c&gt;
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  &lt;/IfModule&gt;
  </code></pre>
  
  <p>Tried the following but it does not work:</p>
  
  <pre><code>&lt;RoutingRules&gt;
    &lt;RoutingRule&gt;
      &lt;Condition&gt;
        &lt;HttpErrorCodeReturnedEquals&gt;404&lt;/HttpErrorCodeReturnedEquals&gt;
      &lt;/Condition&gt;
      &lt;Redirect&gt;
        &lt;HostName&gt;domain.com&lt;/HostName&gt;
        &lt;ReplaceKeyWith&gt;index.html&lt;/ReplaceKeyWith&gt;
      &lt;/Redirect&gt;
    &lt;/RoutingRule&gt;
  &lt;/RoutingRules&gt;
  </code></pre>
  
  <p>If I do it like that I just get my Header and Footer rendered but nothing more.</p>
  
  <p>Thank you!</p>