PWA doesn't load when router is in history mode (Vue CLI 3 based project)

问题

I have a Vue CLI 3 based app which I would like to function as a PWA. I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process.

When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to index.html). At first I used the default settings provided with vue CLI project and the PWA plugin. After doing some research, I added the following to my vue.config.js:

pwa: {                     
  workboxOptions: {
    skipWaiting: true,
    navigateFallback: 'index.html'
  }
}

and I saw that the following was indeed added to service-worker.js:

workbox.skipWaiting();    
...
workbox.routing.registerNavigationRoute("index.html");

but it still didn't help. Even though the app registers successfully on my mobile device's homescreen, it just won't run unless I change the routing back to hash mode.

Does anyone have a clue what I might be missing?

Thanks

回答1:

I have the same problem, i solved it by adding this in the end of my router.js

{
  path: '*', // or '/index.html'
  beforeEnter: (to, from, next) => {
    next('/')
  }
}

回答2:

Try /index.html instead of index.html.

来源：https://stackoverflow.com/questions/53805608/pwa-doesnt-load-when-router-is-in-history-mode-vue-cli-3-based-project