Routes break in production when enabling HTML5 history mode

BigAppear

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

Max

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;
}

BigAppear

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

paul

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

rstoenescu

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.

damosse31

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>

rstoenescu

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!

FascistDonut

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

FascistDonut

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

rstoenescu

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

rstoenescu

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”.

gvorster

How can I fix this when testing locally using:

quasar build
quasar serve dist/spa

Only root “/” is working

gvorster

@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.

No More Posting New Topics!

Routes break in production when enabling HTML5 history mode