Routes break in production when enabling HTML5 history mode



  • Hello,

    My Quasar app works well in development mode (quasar dev), but all routing except root (/) fail when I go prod (after quasar build).

    I tested with quasar serve ./dist, a local express server in dist/ folder, still not work.

    Here are my /router.js and /config/index.js files:

    router.js:

    ...
    export default new VueRouter({
      /* If you decide to go with "history" mode, please also open /config/index.js
      * and set "build.publicPath" to something other than an empty string.
      * Example: '/' instead of current '' */
    
      mode: 'history',
      routes: [
        { path: '/', component: load('Hello') },
        { path: '/test', component: load('Hello') },
        { path: '/authenticate', component: load('Authenticate') },
        { path: '*', component: load('Error404') } // Not found
      ]
    })
    

    index.js:

    ...
    build: {
      env: require('./prod.env'),
      publicPath: '/',
      productionSourceMap: false,
      purifyCSS: true
    },
    

    So working route:

    /

    Not working routes:

    /test
    /authenticate
    /* (404)

    Do you have any idea of what I have done wrong ? I followed Quasar recommandations



  • you need to change your webserver config if you are using history mode!

    check here: https://router.vuejs.org/en/essentials/history-mode.html

    you need to explicitly tell the webserver where to route your requests. for nginx its something like this:

    location / {
    try_files $uri $uri/ /index.html;
    }



  • Hi @Max,

    I tested only Native Node.JS on your link, 1h ago, and it didn’t work.
    But surprise, the ‘connect-history-api-fallback’ middleware worked for me.

    It didn’t work on Heroku at the beginning.
    Thanks to this post: https://forum.vuejs.org/t/how-do-i-implement-connect-history-api-fallback-so-that-url-paths-redirect-to-index-html/10938/6, it now works pretty well !

    I hope I won’t have any problem on Apache, soon, on another project with Quasar.

    Thanks anyway :)



  • I ran recently into same trouble with nginx when using child routes.
    So main routes worked perfectly , but not routes with 2 params in it.
    I’m using following nginx config:
    location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ @rewrites;
    }

    location @rewrites {
    rewrite ^(.+)$ /index.html last;
    

    }

    But the most important update i did was in the config.index.js file:
    publicPath: ‘/’, for the PRODUCTION. section


  • Admin

    Might be a good idea to try Vue’s own forum for this as they offer full support for Vue Router. Quasar is irrelevant for this.
    The main idea is that the server on which one is deploying the distributables must be configured according to the routes that you are using.



  • Here is my apache version (.htaccess) if needed and it work without problem since long time

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

  • Admin

    Maybe adding this to the documentation will help a lot. Please drop here your configurations for all web servers you worked with and I will add everything to the docs. Thanks!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.