I created a project with Vue.js and Vuetify using the vue.js CLI. I would like to host this application with Github Pages. So I took a guide from here
and when not using the history moute of the vue.js Router (https://router.vuejs.org/guide/essentials/history-mode.html) to make sure I don’t need a server.
I created a build of my project and renamed the generated dist folder to docs. This docs folder is placed in the root directory (where it was generated). When I select master branch /docs folder as my Github Pages publishing source I get a blank white page.
When I check the console I get a
Failed to load resource: the server responded with a status of 404 ()
for each file generated in the dist/docs folder. What am I missing?
Solution :
This could be that the root path of the app is set to look at the root of the github instead of the root of the repository.
It also looks like you are using vue-cli-3 from the tags. So here is what there is done for deploying a vue.js app to be hosted on github pages.
Create a vue.config.js file in the root of the app.
In that file, set the public path to match the repository name.
module.exports = {
publicPath: process.env.NODE_ENV === ‘production’ ? ‘/YOUR_REPO_NAME/‘ : ‘/‘
}
Create a deploy.sh file in the root of the app.
In the file, write the following
set -e
npm run build
cd dist
git init
git add -A
git commit -m ‘deploy’
git push -f git@github.com:YOUR_USER_NAME/REPOSITORY_NAME.git master:gh-pages
cd -
Now from the command line, in the root of the app, you can run sh deploy.sh. This will run the build command for vue-cli, go into the dist folder, commit those files and push them to the gh-pages branch.
Then you can set the github repo to use gh-pages instead of docs. Since you mentioned you are not using history mode for vue-router, you should see the # in the URL string and it will work when a user refreshed the page on a different route other than home.
Hope that helps point you in the right direction for deploying and hosting the vue.js app on github pages.