vue-easy-deploy

The easiest way to deploy Vue CLI applications to GitHub Pages.

First time users:

1. npm i -g vue-easy-deploy
   
   
2. cd /path/to/your/git/repo
   
   
3. vue-easy-deploy or ved to build your project
   
   
4. git add . → git commit -m "Your message" → git push origin main
   
   
5. Go to your GitHub repository → Settings → Pages
   
   
6. Set "source" to "main" and set "folder" to "docs"
   
   

That's it! After you've followed these steps your first time, you will only need to run vue-easy-deploy or ved before pushing your changes on subsequent deployments in order to update your website.

Background:

By default, Vue.js applications that were created using the Vue CLI can't be hosted statically. After you compile your hard work and try to open the resulting index.html file with your web browser, you will be disappointed to see an empty white screen. Many Vue.js users have experienced this frustration. Yes, there are existing ways of deploying your Vue CLI application, such as this method described by the official Vue.js website. However, these methods are unnecessarily complicated for someone who's only trying to deploy a simple, non-enterprise project.

vue-easy-deploy is an NPM package that makes deploying Vue CLI projects as easy as possible.

For anyone struggling to find the GitHub Pages settings for your repository:
github.com/<GITHUB USERNAME>/<REPO NAME>/settings/pages