Vue.js PWA Plugin not loading service-worker.js when deployed to subfolder (Github Pages)

Question

I used the Vue CLI to create a new Vue project, and selected PWA support when using 'vue create'.

I also used the vue-gh-pages plugin to deploy the app to a github pages URL.

The problem is that it's attempting to load http://myusername.github.io/service-worker.js ..instead of: http://myusername.github.io/app-name/service-worker.js

Inside of /src/registerServiceWorker.js I can noticed:

register(`${process.env.BASE_URL}service-worker.js`, {

But when I attempt to set the BASE_URL in vue.config.js with:

module.exports = {
   baseUrl: '/app-name/'
}

..it breaks the links from all of the other scripts.

The app works when I run it locally, along with the PWA support. Anyone know how to get this to work with sub folders / github pages?

Thanks

Answer 1

I think you are forgetting to build your project before you deploy it. If you are running a Vue CLI that uses a build process, you should be running npm run build which will generate a dist folder that has all your resources as a static bundle.

You should commit that to your gh-pages branch and serve that instead.

I'm saying this because process.env.BASE_URL is something that the node.js side of things understands. GitHub pages won't be populating that for you at runtime since it only serves content statically.