build and publish dist folder to github pages

Question

I created a project with Vue.js and Vuetify using the Vue CLI. I would like to host this application with Github Pages. So I took a guide from here

https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch

and I am not using the history moute of the Vue 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?

Macedonian

Answer 1

This could be that the root path of your app is set to look at the root of your 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 I have done for deploying a Vue app to be hosted on github pages.

1. Create a vue.config.js file in the root of your app.

2. In that file, set the public path to match the repository name.

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/YOUR_REPO_NAME/' : '/'
}

3. Create a deploy.sh file in the root of your app.

4. 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 [email protected]:YOUR_USER_NAME/REPOSITORY_NAME.git master:gh-pages

cd -

5. Now from the command line, in the root of your 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.

6. Then you can set your 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 your Vue app on github pages.

Minimal

thanks for your help but it seems I did it wrong. I setup the files as you told me to do but the deployment went wrong. In the gh-pages branch I have all files too and it only deploys the readme file of the repo. This is my project github.com/matthiashermsen/vue-minesweeper/tree/master – Macedonian

@Macedonian Your gh-pages branch should only have the contents of the dist folder created during the build command which was run from the deploy.sh file. The gh-pages branch currently has the same files as the master branch. It should not have a readme.md which is why that page is showing, but should have an index.html at the root of gh-pages with folders for all of the compiled/bundles assets that were built into dist folder. – Minimal

ah yes, there were some mistakes. I will leave a link here showing a tutorial on how to create an empty gh-pages branch gist.github.com/ramnathv/2227408 – Macedonian

Answer 2

I add vue.config.js file， and modify webpack config，like this

module.exports = {
  outputDir: 'docs'
}

Ophthalmology