Vue Router History Mode with PWA in Offline Mode

Question

To get history mode working with Vue-Router you need to return the contents of your main page when trying to access a route that doesn\'t exist. For example when you visit

Answer 1

You need to set the navigateFallback option in your vue.config.js file:

pwa: {
  workboxOptions: {
    navigateFallback: 'index.html'
  }
}

It will automatically add the necessary code to your service worker:

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("index.html"));

I had the same problem and I found the solution here: https://github.com/vuejs/vue-cli/issues/717#issuecomment-382079361