Blank page for a VueJS app on Github pages

Question

I have deployed a Vue app on the following repository's gh-pages branch.

But accessing https://christopherkade.com/STracker gives the following error on Firefox (and similar errors on other browsers):

Loading failed for the with source “https://christopherkade.com/static/js/manifest.5f330dcceda3a8431045.js”.

Loading failed for the with source “https://christopherkade.com/static/js/vendor.d99d5ed4cd2156cc1a6f.js”.

Loading failed for the with source “https://christopherkade.com/static/js/app.ccc0f9d5d6f02f3b3285.js”.

Please note that I have tried changing assetsPublicPath to './' in config/index.js and added <base href="/"> to my index.html.

What could be causing such a path issue?

Answer 1

What I did was to change the index.html file in /dist folder. Removing the / from static. And copy it to docs folder. My github page point to that branch.

I have a "publish" script in package.json to do this automatically

"publish": "npm run build && rm -rf docs; cp -r dist docs && sed -i -e 's/src=\\//src=/g' docs/index.html ; sed -i -e 's/href=\\//href=/g' docs/index.html"

An example using the simple webpack template https://github.com/vitogit/vue-chessboard-examples Another using the webpack template https://github.com/vitogit/vue-chess-guardian