![]() ![]() Luckily, there is an easy little workaround.Īll you have to do is duplicate your index.html file and name the copy 404.html. This is because GitHub Pages does not automatically redirect all requests to serve index.html. ![]() If you’re using history mode in Vue router, you’ll notice that if you try to go directly to a page other than / you’ll get a 404 error. One thing, I discovered when trying to set up my GitHub Pages site, is that working with Vue Router gets a little tricky. Tip – Handling Vue Router with a Custom 404 Page In a few minutes, GitHub Pages should refresh with your newest repository changes, and you should be able to see your Vue project online. If we take a look at our gh-pages branch, we will see that it is equivalent to being the root of the dist folder. The prefix option specifies the folder that we want for our the subtree. This step makes gh-pages a subtree of our master branch. Run git subtree push -prefix dist origin gh-pages Make sure that dist is not included in your. ![]() This commits our changes to the master branch so that we can create a dist subtree in the next step. Run git add dist & git commit -m 'adding dist subtree' This step is pretty self explanatory, we actually need to have a dist folder to deploy. With our Vue publicPath configured, we can now work on deploying our project. Now, when we deploy our site, all the static assets should be loaded from the correct paths. NODE_ENV = " production " ? " /REPO_NAME/ " : " / " , We want to take the path found in that red box – anything after github.io – and use it in our this. We want to route it to the URL path of our deployed GitHub Pages site, which we can find in our repository settings. If we don’t have this configuration, our deployed site will not properly load assets such as images. Here, we want to configure the publicPath (which also edits the webpack publicPath) to route all static assets to the proper path. On the master branch, we want to create a file in the root directory of our project. Set publicPath in to our repository name This means that all files on our gh-pages branch can be accessed at something like – for example. A majority of the time, the URL of the deployed site will be GITHUB_/ REPO_NAME. Setting Up Your ProjectĪlright, first we have to understand where our gh-pages branch will be deployed. This will make a lot more sense when we do it so let’s go. Our end goal is for this branch to contain just our build folder – which for a lot of projects, will be dist.Īnd we can do this by using this gh-pages branch as a subtree of our master branch. One of the easiest ways to do this is to create a separate gh-pages branch on your repository. In terms of Vue, it means that once we build our project, we can serve those files as long as we push them to a repo. GitHub Pages allows you to serve static HTML, CSS, and JavaScript files from a GitHub repository. Configuring Vue Router in this deployment environmentĪ lot of these steps are based on this great article by Roland, in combination with some of the tips I found while deploying a Vue 3 demo space.Īlright, let’s jump right in.Setting up a Vue project to work with GitHub Pages.It’s a static site hosting service that takes files straight from a repository on GitHub.Ī great part about GitHub Pages is that it’s pretty easy to set up once you know how it works. GitHub Pages is a great free option to deploy your Vue application. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |