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?

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.

Answer 2

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

module.exports = {
  outputDir: 'docs'
}