title: vue-router showing blank page when built
body: <p>I'm asking for help. I use vuejs to make my application. Everything works perfectly. But I do the <code> npm run build</code>, I extract the dist folder and I open index.html, I have a blank page, and when I look in the console, I have no errors.</p>
  <h1>main.js</h1>
  <pre class="lang-js prettyprint-override"><code>import Vue from &quot;vue&quot;;
  import Vuex from &quot;vuex&quot;;
  import router from &quot;./router&quot;;
  import App from &quot;./App.vue&quot;;
  import vuetify from &quot;./plugins/vuetify&quot;;
  import store from &quot;./store&quot;;
  import {
    ValidationObserver,
    ValidationProvider,
    extend,
    localize
  } from &quot;vee-validate&quot;;
  import fr from &quot;vee-validate/dist/locale/fr.json&quot;;
  import * as rules from &quot;vee-validate/dist/rules&quot;;
  
  // install rules and localization
  Object.keys(rules).forEach(rule =&gt; {
    extend(rule, rules[rule]);
  });
  
  localize(&quot;fr&quot;, fr);
  
  // Install components globally
  Vue.component(&quot;ValidationObserver&quot;, ValidationObserver);
  Vue.component(&quot;ValidationProvider&quot;, ValidationProvider);
  
  Vue.config.productionTip = false;
  
  //load vue-moment
  Vue.use(require(&quot;vue-moment&quot;));
  
  //Load vuex
  Vue.use(Vuex);
  
  //Load vueRouter
  new Vue({
    router,
    vuetify,
    store,
    render: h =&gt; h(App)
  }).$mount(&quot;#app&quot;);
  </code></pre>
  <h1>router/index.js</h1>
  <pre class="lang-js prettyprint-override"><code>import Vue from &quot;vue&quot;;
  import VueRouter from &quot;vue-router&quot;;
  import Professeur from &quot;../components/Professeur&quot;;
  import Matiere from &quot;../components/Matiere&quot;;
  import Dashboard from &quot;../components/Dashboard&quot;;
  import Filiere from &quot;../components/Filiere&quot;;
  import Salle from &quot;../components/Salle&quot;;
  import Shedule from &quot;../components/Shedule&quot;;
  import SheduleLine from &quot;../components/SheduleLine&quot;;
  import Login from &quot;../components/Login&quot;;
  import Home from &quot;../components/Home&quot;;
  
  Vue.config.productionTip = false;
  
  Vue.use(VueRouter);
  
  const router = new VueRouter({
    mode: &quot;history&quot;,
    routes: [
      {
        path: &quot;/dashboard&quot;,
        name: &quot;dashboard&quot;,
        component: Dashboard,
        meta: {
          requiresAuth: true
        },
        children: [
          {
            path: &quot;personnel/professeurs&quot;,
            name: &quot;p_professeur&quot;,
            component: Professeur
          },
          {
            path: &quot;&quot;,
            name: &quot;home&quot;,
            component: Home
          }
        ]
      },
      {
        path: &quot;/login&quot;,
        name: &quot;login&quot;,
        component: Login,
        meta: {
          guest: true
        }
      }
    ]
  });
  
  router.beforeEach((to, from, next) =&gt; {
    if (to.matched.some(record =&gt; record.meta.requiresAuth)) {
      let user = JSON.parse(localStorage.getItem(&quot;_GET_TOKEN&quot;));
      if (!user &amp;&amp; !user.token) {
        next({
          name: &quot;login&quot;
        });
      } else {
        next();
      }
    } else {
      next();
    }
  });
  
  export default router;
  </code></pre>
  <h1>App.vue</h1>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;v-app&gt;
      &lt;router-view/&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'app',
    }
  &lt;/script&gt;
  </code></pre>
  <p>Once I compile, I have no errors but a blank page.</p>
  <p>Thanks for any help. I tried without the router view, I manage to launch the index.html once compiled for production and I have a rendering.</p>