title: Page doesn't load with router mode: history on Apache
body: <p>I wanted to get rid of hash (#) from app's URL:</p>
  
  <p><s><code>http://localhost/CoreUI-Vue/Vue_Starter/dist/#/dashboard</code></s> <code>http://localhost/CoreUI/Vue_Starter/dist/dashboard</code></p>
  
  <p>so I've changed <code>mode</code> option in <code>vue-router</code> from <code>hash</code> to <code>history</code> in <code>router/index.js</code>:</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  
  export default new Router({
    mode: 'history',
  </code></pre>
  
  <p>but afterwards, <strong>when I recompiled the source code (<code>npm run build</code>) and opened the app (<code>http://localhost/CoreUI/Vue_Starter/dist/dashboard</code>), it loaded an empty page</strong>:</p>
  
  <pre><code>&lt;body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"&gt;
  &lt;!----&gt;
  &lt;script type="text/javascript" src="./static/js/manifest.7c717a1bcc0cc7dc29c1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./static/js/vendor.dfb9d96e757ce802aece.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./static/js/app.1cbf93c84add6c85b943.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>whereas router with <code>mode: 'hash'</code> (<code>http://localhost/CoreUI/Vue_Starter/dist/#/dashboard</code>) loads app without problems:</p>
  
  <pre><code>&lt;body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"&gt;
  &lt;div class="app"&gt;
      (...app content...)
  &lt;/div&gt;
  &lt;script type="text/javascript" src="./static/js/manifest.a2cf3e09f095de958e46.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./static/js/vendor.dfb9d96e757ce802aece.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./static/js/app.72b651a6c3b2660db094.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I realize that additional config has to be provided for web server for this to work, but it still didn't help me.</p>
  
  <p>In Apache's config <code>httpd.conf</code> I ensured I have mod_rewrite turned on:</p>
  
  <pre><code>LoadModule rewrite_module modules/mod_rewrite.so
  </code></pre>
  
  <p>I provided a support for history router in <code>.htaccess</code> (copied from <a href="https://router.vuejs.org/en/essentials/history-mode.html" rel="nofollow noreferrer">vue-router docs</a>):</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><code>.htaccess</code> is located in same folder as project's <code>index.html</code>.</p>
  
  <p>I'm working on empty <a href="https://github.com/mrholek/CoreUI-Vue" rel="nofollow noreferrer">CoreUI-Vue</a> template which uses most popular <a href="https://github.com/vuejs-templates/webpack" rel="nofollow noreferrer">Webpack/Vue boilerplate</a>, so there is rather nothing special about my code or config.</p>