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!



  • The Apache version from @damosse31 worked for me, thanks.



  • How can I add that .htaccess file to my build folder automatically?


  • Admin

    quasar build && cp /path/to/.htaccess dist/<spa|…>


  • Admin

    You can automate this by adding an npm script in package.json.

    scripts: {
       "build": "quasar build && cp /path/to/.htaccess dist/<spa|…>"
    

    Then run “yarn build” or “npm run build”.



  • How can I fix this when testing locally using:

    quasar build
    quasar serve dist/spa
    

    Only root “/” is working



  • @gvorster said in Routes break in production when enabling HTML5 history mode:

    How can I fix this when testing locally using:

    quasar build
    quasar serve dist/spa
    

    Only root “/” is working

    Found it. I need to do

    quasar serve --history dist/spa
    

    Then it is working.


Log in to reply