Blank page with vue-router with history mode and production

Question

I'm new with vue and I've the next error. I build a little project with the next template https://github.com/vuejs-templates/webpack with default configuration.

I've added vue-router and it works fine when I'm in develop mode, but when I build production mode and use, it show a blank page.

If I remove history mode of configuration, it works. Any suggestion?

Thanks.

Answer 1

@bbsimonbb, I test the fallback but it didn't work.

The problem was with configuration of Router, specifically the property base. By default is '/' but you should configure with the base of your web app. You can read more in more detail here

Ex: http://www.mywebsite.com/myapp/ => base: '/myapp/'

The path where I've the file on I configure the Router is /src/router/index.js

I hope it helps someone to avoid time.

Answer 2

Does production mode involve a change of web-server or machine? It sounds like the production environment may not have the fallback route configured on the server.

Answer 3

As this is the first stackoverflow link for the vue-router blank page problem that pops up on google, I think I'd share my experience.

I was getting a blank after fiddling around with the routes paths. My router code looked something like this:

const router = new Router({
  routes: [
    {
      path: "/",
      redirect: "login"
    },
    {
      path: "login",
      component: Login
    },    
  ]
});

After more fiddling, I prepended a forward-slash on to the route path, and I was seeing my login page again, like this:

const router = new Router({
  routes: [
    {
      path: "/",
      redirect: "login"
    },
    {
      path: "/login",
      component: Login
    },    
  ]
});