404 when reloading a Vue website published to Github pages
But when I navigate using the navbar (christopherkade.com/posts or christopherkade.com/work) and reload the page 404 File not found
Let me explain why 404 File not found
is being shown
When christopherkade.com/posts
is triggered from web browser, the machine to which the domain christopherkade.com
is mapped is contacted.
The path /posts
is searched in its server. in your case, i believe the route for /posts
doesn't exist in the server. As the result 404 is displayed
There are few ways to fix this
To prevent the browser from contacting the server when triggering the request christopherkade.com/posts
, you can keep mode : 'hash'
in your route configuration
How mode : 'hash'
works? This is one way to fix your issue
mode : 'hash'
makes use of default browser behavior which is to prevent http request from triggering the details that exists after #
As the result, when you trigger christopherkade.com/#/posts
, christopherkade.com
is being triggered by the browser and once response is received the /posts
route from the route config
is invoked.
Lets assume that you have control over the server and you are adamant that you need
#
to be removed from the URL
Then what you could do is to configure server in such a way that server responds with the same page everytime any paths is being sent. Once response is received in the browser, route will automatically kicked off.
Even in your current program, the routeConfig gets kicked off when you click any links (like work,posts) in your page. This is because the browser behavior is not being invoked at this point.
In your case, you use github for hosting this app with mode: 'history'
i myself have to look for a specific solution to workaround this. i will update my answer once i get it.
i hope this was useful.
You can fix this issue by a simple workaround. I combined all the insights from reading multiple issues about this and finally this is what helped me fix this problem.
Solution Logic - You just need a copy of index.html
with the name 404.html
in the dist folder
Steps to fix
Go to you package.json
file, under scripts add a new script called "deploy" like below, you just need to execute this everytime after you build your page. It will automatically take care of the issue.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "cd dist && cp index.html 404.html && cd .. && gh-pages -d dist"
},
This will copy the index.html & rename it 404.html and pushes dist
folder under the branch gh-pages
and after that your script will appear in the vue ui like below
or
If you are using git subtree push --prefix dist origin gh-pages
method to push, then edit the deploy
script in package.json
to below
"deploy": "cd dist && cp index.html 404.html
and then execute the below git command. PS, don't forget to execute this script before manually using npm script
method or from the vue ui
git subtree push --prefix dist origin gh-pages
This actually happens since your browser makes a request to christopherkade.com/posts
URL which doesn't exist (this route is defined in Vue application running from index.html
).
If you were running your own server, you would probably configure it to render your index.html
page for any request URI, so your Vue application would be loaded from any path and handle routing by itself.
Speaking of GitHub pages, you can't just configure them to act the same way I described, but fortunately, there is a workaround which uses custom 404 page: https://github.com/rafrex/spa-github-pages